脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ExtJS 动态加载树treepanel，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 一、新建一个TreeStore，并添加根节点
复制代码
Ext.define('Demo1.store.TreeDemoStore', {
extend: 'Ext.data.TreeStore',
root: {
text: '目录树',
id: 0
}
});
复制代码
二、在view中添加treepanel，绑定TreeDemoStore
复制代码
Ext.define('Demo1.view.MyViewport', {
extend: 'Ext.container.Viewport',
Ext.applyIf(me, {
items: [
{
xtyPE: 'treepanel',
id: 'treeDemo',
height:500,
store: 'TreeDemoStore',
autoScroll: true
}
]
});
this.callParent(arguments);
}
});
复制代码
三、在controller的onLaunch方法中加载树
复制代码
Ext.define('Demo1.controller.MyController', {
extend: 'Ext.app.Controller',
init: function (application) {
},
onLaunch: function () {
//请求数据列表(数据保存在哪里就随你了，这里我先写死)id:节点id;text:节点名称;pid:父节点id
var info = [
{
id: '1', text: '二级节点1', pid: '0'
},
{
id: '2', text: '二级节点2', pid: '0'
},
{
id: '3', text: '二级节点3', pid: '0'
},
{
id: '4', text: '二级节点1-三级节点1', pid: '1'
},
{
id: '5', text: '二级节点1-三级节点2', pid: '1'
},
{
id: '6', text: '二级节点2-三级节点1', pid: '2'
},
{
id: '7', text: '二级节点2-三级节点2', pid: '2'
},
{
id: '8', text: '二级节点2-三级节点1-四级节点1', pid: '6'
},
{
id: '9', text: '二级节点2-三级节点1-四级节点2', pid: '6'
}
];
var store = Ext.data.StoreManager.lookup('TreeDemoStore');
var root = store.getRoot();
appendTreeChildNodes(root, 0, info);
}
});
//根据父节点id加载子节点
function appendTreeChildNodes(node, pid, infos) {
var children = [];
var childModel = {};
for (var i = 0; i < infos.length; i++) {
if (infos[i].pid == pid) {
childModel = {};
childModel.text = infos[i].text;;
childModel.id = infos[i].id;
childModel.pid = infos[i].pid;
children.push(childModel);
infos.splice(i, 1);
i--;
}
}
node.appendChild(children);
if (node.hasChildNodes()) {
node.eachChild(function (child) {
appendTreeChildNodes(child, child.get('id'), infos); //递归
});
}
else {
node.set('leaf', true);
}
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-ExtJS 动态加载树treepanel全部内容，希望文章能够帮你解决javascript代码实例教程-ExtJS 动态加载树treepanel所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。