ext 重购 tree

最新推荐文章于 2022-06-11 18:48:31 发布

zyuanq

最新推荐文章于 2022-06-11 18:48:31 发布

阅读量87

点赞数

分类专栏： ext基础文章标签： EXT PHP UI

本文链接：https://blog.csdn.net/zyuanq/article/details/83641859

版权

ext基础专栏收录该内容

72 篇文章 0 订阅

订阅专栏

var CheckboxTree = function() {
    CheckboxTree.superclass.constructor.call(this, {
		renderTo  : 'checkboxTree',
        title     : '所有部门 - ExtJs自带的例子',
        height    : 300,
        width     : 400,
        frame     : false,
        useArrows : true, //是否使用箭头样式
        autoScroll: true,
        animate   : true,
        enableDD  : true,
        containerScroll: true,
        rootVisible    : false,
        root: {
            nodeType : 'async',
			text     : '所有部门',
			expanded : true,
			draggable: false
        },
        dataUrl : "js/widgets/tree/CheckboxTree.php",
        /** 事件监听 */
        listeners: {
            'checkchange': function(node, checked){
                if(checked) node.getUI().addClass('complete');
                else node.getUI().removeClass('complete');
            }
        },
		/** 按钮组 */
        buttons: [{
            text: '得到选中节点值',
			scope  : this,
            handler: function(){
                var msg = '', selNodes = this.getChecked();
                Ext.each(selNodes, function(node){
                    if(msg.length > 0){
                        msg += '';
                    }
                    msg += node.text;
                });
                Ext.Msg.show({
                    title: '选中内容', 
                    msg: msg.length > 0 ? msg : '无选中',
                    icon: Ext.Msg.INFO,
                    minWidth: 200,
                    buttons: Ext.Msg.OK
                });
            }
        }]
	});
};
当然，为了达到更好的效果，还定义了一个 ext 事件，用于实现勾选 / 反选父节点时自动勾选 / 反选所有子节点： 

tree.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);  

                     });  

                 }, tree);  


Ext.extend(CheckboxTree, Ext.tree.TreePanel);

new CheckboxTree();