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