ExtJS TreePanle 延迟加载问题-在线等待

Question

树js代码如下：var root = new Ext.tree.AsyncTreeNode({
id : 'root'
});
var loader = new Ext.tree.TreeLoader({
dataUrl : 'getRootCourt'
});
var tree = new Ext.tree.TreePanel({
id:'vodtree',
animate : true,
title : 'menu',
collapsible : false,
cls:'text_align_left',
enableDD : true,
enableDrag : true,
rootVisible : false,
height:400,
lines : true, 
useArrows : true,
width : 200,
bodyStyle :'overflow-x:visible; overflow-y:visible;background-color:#F2F7FE;',
root : root,
loader : loader
});
root.expand(false, false);其中getRootCourt（）获得树的根节点已经拿到，可是接下来该怎么做才能在点击根节点通过getChildCourt()方法获得下面的叶子呢。在线等待。

Answer 1

后台返回的数据中要"每一个节点有listeners"，监听click事件，函数体发送ajax异步获取叶子

Answer 2

public class GetJSON
    {
        public virtual long id { get; set; }        public virtual string text { get; set; }        public virtual string cls { get; set; }        public virtual bool expanded { get; set; }
        
        public virtual IList<GetJSON> children { get; set; }
        
        public virtual bool leaf { get; set; }
        public virtual bool @checked { get; set; }
    }//json 数据
[{"id":1,"text":"基础设置","cls":"folder","expanded":true,
"children":
[{"id":9,"text":"包装类型","cls":"file","expanded":false,"children":null,"leaf":true,"url":"/PackageType/Search"},
{"id":10,"text":"托盘定义","cls":"file","expanded":false,"children":null,"leaf":true,"url":"/WareHousePallet/Search"}    /** 
            * 组建树 
            */
            var buildTree = function(json) {
                return Ext.create('Ext.tree.Panel', {
                    rootVisible: false, /////////////////
                    border: false,
                    store: Ext.create('Ext.data.TreeStore', {
                        root: {
                            expanded: true,
                            children: json.children
                        }
                    }),
                    listeners: {
                        'itemclick': function(view, record, item,
                                        index, e) {
                            var id = record.get('id');
                            var text = record.get('text');
                            var leaf = record.get('leaf');
                            var tabPanel = Ext.getCmp('tab');
                            var tab = tabPanel.getComponent(id + "");
                            if (leaf) {
                                if (!tab) {
                                    tabPanel.add({
                                        id: id,
                                        title: text,
                                        closable: true,
                                        layout: 'fit',
                                        items: [{
                                            html: '<iframe id="itemPanel" name="itemPanel" frameborder=0 src="' + record.raw.url + '"  style="width:100%;height:100%;" scrolling=no></iframe>'
}]
                                        }).show();
                                    }
                                    tabPanel.setActiveTab(tab); //设置显示当前面板
                                }
                            },
                            scope: this
                        }
                    });
                };
  /** 
                * 加载菜单树 
                */
                Ext.Ajax.request({
                    url: '<%= Url.Action("TreeMenu", "Home")%>',
                    success: function(response) {
                        var json = Ext.JSON.decode("{data:" + response.responseText + "}");
                        Ext.each(json.data, function(el) {                            var panel = Ext.create(
                                                'Ext.panel.Panel', {
                                                    id: el.id,
                                                    title: el.text, //关键
                                                    layout: 'fit'
                                                });
                            panel.add(buildTree(el));                            leftPanel.add(panel);
                        });
                    },
                    failure: function(request) {
                        Ext.MessageBox.show({
                            title: '操作提示',
                            msg: "连接服务器失败",
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.ERROR
                        });
                    },
                    method: 'post'
                });

Answer 3

关键是这个事件中，跳到后台查询 'itemclick': function(view, record, item,
                                        index, e) {
                            var id = record.get('id');
       
 Ext.Ajax.request({
                                url: '<%=Url.Action("Choice", "InStock") %>',
                                params: { Id: id },//传参
                                method: "POST",
                                success: function(response) {
                                    if (response.responseText == "成功") {
                                        Ext.Msg.alert('提示', "成功");
                                    } else {
                                        Ext.Msg.alert('提示', response.responseText);
                                    }
                                    ItemsStore.load();
                                },
                                failure: function(response) {
                                    ItemsStore.reload();
                                }
                            });});