ExtJS 4常用组件之树面板
By Alex
/ in JavaScript
简介
由于和GridPanel共享基类Ext.panel.Table，因此树、表格有很多共同的功能点。
在Ext.data包中NodeInterface、Tree、TreeStore这三个类与树面板有关。其中NodeInterface为原始的记录（Model）添加了若干API，便于操作树形结构。
可以使用如下的代码声明一个简单的树：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
//ExtJS 4创建树面板 Ext.create( 'Ext.tree.Panel', { //配置项Store是新引入的 store : Ext.create( 'Ext.data.TreeStore', { root : { expanded : true, children : [ { text : "Menu Option 1", leaf : true }, { text : "Menu Option 2", expanded : true, children : [ { text : "Sub Menu Option 2.1", leaf : true }, { text : "Sub Menu Option 2.2", leaf : true } ] }, { text : "Menu Option 3", leaf : true } ] } } ), rootVisible : false } ); //ExtJS 3创建树面板 new Ext.tree.TreePanel( { rootVisible : false, root : new Ext.tree.AsyncTreeNode( { expanded : true, children : [ { text : "Menu Option 1", leaf : true }, { text : "Menu Option 2", expanded : true, children : [ { text : "Sub Menu Option 2.1", leaf : true }, { text : "Sub Menu Option 2.2", leaf : true } ] }, { text : "Menu Option 3", leaf : true } ] } ) } ); |
拖拽与排序
ExtJS 4为树提供了drag-and-drop功能，可以用于重排树的节点：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var store = Ext.create( 'Ext.data.TreeStore', { proxy : { type : 'ajax', api : { read : '../data/drag-drop.json', create : 'create.php' } }, writer : { type : 'json', writeAllFields : true, encode : false }, //树节点顺序变化自动通过writer进行同步 autoSync : true } ); Ext.create( 'Ext.tree.Panel', { store : store, viewConfig : { plugins : { ptype : 'treeviewdragdrop' } } //其它配置项 } ); |
为树添加排序字段也很简单：
|
1 2 3 4 5 6 7 8 9 |
Ext.create( 'Ext.data.TreeStore', { folderSort : true, sorters : [ { property : 'text', direction : 'ASC' } ] } ); |
带复选框的树
为节点添加一个checked数据项即可实现带复选框的树：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[ { "text" : "Cartesian", "cls" : "folder", "expanded" : true, "children" : [ { "text" : "Bar", "leaf" : true, "checked" : true }, { "text" : "Column", "leaf" : true, "checked" : true } ] }, { "text" : "Pie", "leaf" : true, "checked" : true } ] |
TreeGrid
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
Ext.define( 'Book', { extend : 'Ext.data.Model', fields : [ { name : 'book', type : 'string' }, { name : 'pages', type : 'string' } ] } ); var store = Ext.create( 'Ext.data.TreeStore', { model : 'Book', proxy : { type : 'ajax', url : 'data/treegrid.json' }, folderSort : true } ); Ext.create( 'Ext.tree.Panel', { renderTo : Ext.getBody(), collapsible : true, //支持收缩 useArrows : true, //使用箭头图标 rootVisible : false, store : store, multiSelect : true, singleExpand : true, //同时只能展开一个节点 //为树声明多个列，即可成为TreeGrid columns : [ { //树节点使用的列 xtype : 'treecolumn', text : 'Task', flex : 2, sortable : true, dataIndex : 'task' }, { text : 'Assigned To', flex : 1, dataIndex : 'user', sortable : true } ] } ); |
Leave a Reply