extjs 使用TreePanel动态新建一棵数

js代码如下


/*
         * 品目选择
         */
        addItemsFun : function() {
             var treeLoader = new Ext.tree.TreeLoader({
                    dataUrl:ctx+'/getTree'
                });
                var Tree = Ext.tree;

                root = new Tree.AsyncTreeNode({
                    text: '产品分类',
                    draggable:false,
                    id:'source'
                });
                tree2 = new Tree.TreePanel({
                    useArrows:true,
                    autoScroll:true,
                    animate:true,
                    width : 400,
                    region : 'center',
                    enableDD:true,
                    border : false,
                    containerScroll: true, 
                    loader: treeLoader,
                    root:root,

                });
              //leftTree, rightForm 
                leftTree = new Ext.Panel({
                    id : "leftTree",
                    width : 200,
                    height : "100%",
                    region : 'west',
                    border : false,
                    margins : '5 5 5 5',
                    layout : 'anchor',
                    defaults : {
                        anchor : '90%'
                    },
                    items : [tree2]
                });

                rightForm = new Ext.Panel({
                    id : "rightForm",
                    width : 400,
                    height : "100%",
                    region : 'center',
                    border : true,
                    margins : '5 5 5 5',
                    layout : 'anchor',
                    defaults : {
                        anchor : '90%'
                    },
                    items : [

                    ]
                });
            if (!win2) {
                win2 = new Ext.Window({
                    title : '品目选择',
                    layout : 'border',
                    width : 600,
                    height : 500,
                    closeAction : 'hide',
                    plain : true,
                    modal : true,
                    constrain : true,// window不可移动到窗口之外
                    resizable : false,// 不可改变window的大小
                    defaults : {
                        split : true
                    },
                    items : [ leftTree,rightForm],
                    buttonAlign : 'right',
                    buttons : [ {
                        id : 'allowButton',
                        text : '确定',
                        handler : function() {
                            alert("确定");
                        }
                    }, {
                        text : '取消',
                        handler : function() {
                            win2.hide();
                        }
                    } ]
                });



                tree2.on('checkchange', function(node, checked) {   
                    node.expand();   
                    node.attributes.checked = checked;   
                    node.eachChild(function(child) {   
                        child.ui.toggleCheck(checked);   
                        child.attributes.checked = checked;   
                        child.fireEvent('checkchange', child, checked);   
                    });   
                }, tree2);  

                tree2.root.expand();


            }
            win2.show();
        },

action的返回json值格式如下

[{"id":3,"text":"产品类","cls":"folder","children":[{"id":1,"text":"水果类","cls":"file","children":null,"leaf":true,"checked":false},{"id":2,"text":"蔬菜类","cls":"file","children":null,"leaf":true,"checked":false}],"leaf":false,"checked":false}]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章