extjs4.0 动态异步加载节点数据

直接上代码！

样例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'}]