直接上代码！
样例1：传统的树形
- var store2 = Ext.create('Ext.data.TreeStore', {
- proxy: {
- type: 'ajax',
- url: 'WebForm1.aspx'
- },
- fields:['id','text']//跟旧版本extjs一样，节点的id和显示文本
- });
- var AsyncTree2 = Ext.create("Ext.tree.Panel",{
- title: 'Simple Tree2',
- width:300,
- height:500,
- collapsible: true,
- singleExpand: true,
- root: {
- id:1,
- text: "Root node",
- expanded: true
- },
- store:store2,
- renderTo: Ext.getBody()
- });
样例2：TreeGrid
- var store = Ext.create('Ext.data.TreeStore', {
- proxy: {
- type: 'ajax',
- url: 'WebForm1.aspx'
- },
- fields:['projectId','project','taskId','id','text']
- });
- var AsyncTree = Ext.create("Ext.tree.Panel",{
- title: 'Simple Tree',
- width:300,
- height:500,
- collapsible: true,
- useArrows: true,
- multiSelect: true,
- //singleExpand: true,
- root: {
- id:1,
- text: "Root node",
- expanded: true
- },
- columns:[
- { xtype: 'treecolumn', text:'text',dataIndex:'taskId'},//要标明为treecolumn,否则显示不出节点前面的小图标
- {text:'ParentId',dataIndex:'projectId'}//第二列
- ],
- store:store,
- renderTo: Ext.getBody()
- });
当首次点击子节点时，会Post一个参数node(节点的id值)到后台服务器，用Firebug可以临看到。
WebForm1.aspx返回的JSON样例（根据实际应用组织）
[{projectId: 100, text: 'G112', taskId: 112, estimate: 6, rate: 150, due:'06/24/2007',checked:true},{projectId: 100, text: 'A113', id: 113, estimate: 4, rate: 150, due:'06/25/2007',leaf:true},{projectId: 100, text: 'V114', id: 114, estimate: 4, rate: 150, due:'06/27/2007'},{projectId: 100, text: 'C115', id: 115, rate: 0, due:'06/29/2007'}]