Ext树

最新推荐文章于 2020-07-27 09:44:32 发布

原创最新推荐文章于 2020-07-27 09:44:32 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #json

ExtJs 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用ExtJS创建树形面板的例子，展示了如何构建一个包含多个层级的树形结构，用以展示汽车品牌及其子项的具体信息。

Ext.onReady(function(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel('tree', {
animate:true,
enableDD:false,
loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
lines: true,
selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false
});

var json =
[
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "TT", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
},
{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "CTS", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "CTS-V", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
}

];

[color=red]var root = new Tree.AsyncTreeNode({
text: 'Autos',
draggable:false,
id:'source',
children: json
}); [/color]
tree.setRootNode(root);

tree.render(tree);
root.expand();
});