extjs tree checkbox 复选框实现 取值 显示

原来做EXTTREE的复选其实很简单！

数据：

[{id:'55',text:'节点11',leaf:false,checked:true}

checked属性就是控制复选框是否出现，true出现复选框  false 不出现。

 

 

获取tree的选中值方法：var nodes = tree.getChecked();

 

当点击父级节点同时选中子节点方法：

需要添加“checkchange”事件。

"checkchange": function(node, state) {
                        if (node.hasChildNodes()) {
                            for (i = 0; i < node.childNodes.length; i++) {
                                node.childNodes[i].getUI().checkbox.checked = state;
                            }
                        }
                    }

 

 第二种方法：递归所有节点

                    "checkchange": function(node, state) {
                        if (node.hasChildNodes()) {
                            node.eachChild(function(child) {
                                child.ui.toggleCheck(state);
                                child.attributes.checked = state;
                                child.fireEvent('checkchange', child, state); //递归调用
                            });
                        }

 

实例代码：

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = '../../Images/s.gif';
    var win;
    var abutton = Ext.get('tx_l');
    abutton.on('click', function() {
        if (!win) {

            var trNode;
            var Tree = Ext.tree;
            var loader = new Tree.TreeLoader({
                dataUrl: '../../system/address_list/Default.aspx',
                listeners: {
                    "beforeload": function(treeLoader, node) {
                        treeLoader.baseParams.id = (node.id != "0" ? node.id : "");
                    }
                }

            });
            var tree = new Tree.TreePanel({
                //        el: 'tree-div',
                useArrows: true,
                autoScroll: true,
                animate: true,
                //        enableDD: true,
                containerScroll: true,
                //        dropConfig: {appendOnly:true},
                loader: loader,
                listeners: {
                    "click": function(node) {
                        trNode = node;
                        //                Ext.get("nodeid").dom.value = node.id;
                        //                alert(Ext.get("nodeid").dom.value);
                    },
                    "checkchange": function(node, state) {
                        if (node.hasChildNodes()) {
                            for (i = 0; i < node.childNodes.length; i++) {
                                node.childNodes[i].getUI().checkbox.checked = state;
                            }
                        }
                    }

                }
            });


            var root = new Tree.AsyncTreeNode({
                text: '我的通讯录',
                draggable: false,
                id: '0'
            });
            tree.setRootNode(root);
            //        tree.render();
            root.expand();

            win = new Ext.Window({
                title: '通讯录',
                iconCls: 'address_list',
                applyTo: 'txl-win',
                layout: 'fit',
                width: 300,
                height: 400,
                closeAction: 'hide',
                plain: true,
                modal: 'true',
                items: [tree],
                buttons: [{
                    text: '获取选中值',
                    handler: function() {

                    //var nodes = tree.getChecked();
                      //  alert(nodes);
                                            var nodes = tree.getRootNode().childNodes;
                        for (var j = 0; j < nodes.length; j++) {
                            var node = tree.getRootNode().childNodes[j];
                            if (node.hasChildNodes()) {
                                for (var i = 0; i < node.childNodes.length; i++) {
                                    if (node.childNodes[i].getUI().checkbox.checked) {
                                         alert(node.childNodes[i].id);
                                    }
                                }
                            }
                        }

                    } }]
                });


            }
            win.show(this);

        });
    });