EXTjS4下拉树 支持单选多选级联选择 comboxtree

原创
2014/12/30 19:21
阅读数 739

   下拉树支持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置一下即可!

效果图.

  • 不带checked的json数据格式只支持单选

  • 带jchecked的json数据的单选

  • 带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联

封装基类代码

:comboxtree.js

Ext.define("Ark.combo.ComboTree", {  
    extend: "Ext.form.field.Picker", 
    alias : 'widget.arkComboTree',
    requires: ["Ext.tree.Panel"],  
    hiddenValue: '',
    initComponent: function() {  
        var self = this;  
        Ext.apply(self, {  
            fieldLabel: self.fieldLabel,  
            labelWidth: self.labelWidth  
        });  
        
        var store = Ext.create('Ext.data.TreeStore', {  
            proxy: {  
                type: 'ajax',  
                url: self.storeUrl  ,
                extraParams: self.extraParams || {}
            },  
            sorters: [{  
                property: 'leaf',  
                direction: 'ASC'  
            }, {  
                property: 'text',  
                direction: 'ASC'  
            }],  
            root: {  
                id: self.rootId,  
                text: self.rootText  
            }
        });  
        
        if(self.treeNodeParams) {
        	for(var i=0; i<self.treeNodeParams.length; i++) {
        		var param = self.treeNodeParams[i];
				store.getProxy().extraParams[param.name] = param.value;        		
        	}
        }
        
        store.on('load', function() {
        	self.initValue();
        });
        store.load();
        
        this.store = store;
        self.callParent();  
    },  
    createPicker: function() {  
        var self = this;  
        
        self.picker = new Ext.tree.Panel({  
            height: 300,  
            autoScroll: true,  
            floating: true,  
            focusOnToFront: false,  
            shadow: true,  
            ownerCt: this.ownerCt,  
            useArrows: true,  
            store: this.store,  
            rootVisible: false  
        });  
        
        self.picker.on({  
            checkchange: function(record, checked) {
                var checkModel = self.checkModel;  
                if (checkModel == 'double') {  
                    var root = self.picker.getRootNode();  
                    root.cascadeBy(function(node) {  
                        if (node.get('text') != record.get('text')) {  
                            node.set('checked', false);  
                        }  
                    });  
                    if (record.get('leaf') && checked) {  
                        self.setRawValue(record.get('id')); // 隐藏值  
                        self.setValue(record.get('text'), true); // 显示值  
                    } else {  
                        record.set('checked', false);  
                        self.setRawValue(''); // 隐藏值  
                        self.setValue('', true); // 显示值  
                    }  
                } else {  
                    var cascade = self.cascade;  
  
                    if (checked == true) {  
                        if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  
                            if (cascade == 'child' || cascade == 'both') {  
                                if (!record.get("leaf") && checked) record.cascadeBy(function(record) {  
                                    record.set('checked', true);  
                                });  
                            }  
                            if (cascade == 'parent' || cascade == 'both') {  
                                pNode = record.parentNode;  
                                for (; pNode != null; pNode = pNode.parentNode) {  
                                    pNode.set("checked", true);  
                                }  
                            }  
                        }  
                    } else if (checked == false) {  
                        if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  
                            if (cascade == 'child' || cascade == 'both') {  
                                if (!record.get("leaf") && !checked) record.cascadeBy(function(record) {  
                                    record.set('checked', false);  
                                });  
                            }  
                        }  
                    }  
  
                    var records = self.picker.getView().getChecked(),  
                    names = [],  
                    values = [];  
                    Ext.Array.each(records,  function(rec) {  
                        names.push(rec.get('text'));  
                        values.push(rec.get('id'));  
                    });  
                    // self.setRawValue(values.join(',')); // 隐藏值,这种方式不对,改成使用hiddenValue替代
                    self.setHiddenValue(values.join(',')); // 隐藏值
                    self.setValue(names.join(','), true); // 显示值  
                }  
            },  
            itemclick: function(tree, record, item, index, e, options) {  
                var checkModel = self.checkModel;  
  
                if (checkModel == 'single') {  
                    if (record.get('leaf')) {  
                    	self.setHiddenValue(record.get('id')); // 隐藏值
                        //self.setRawValue(record.get('id')); // 隐藏值  
                        self.setValue(record.get('text'), true); // 显示值  
                    } else {  
                    	self.setHiddenValue(''); // 隐藏值
                        //self.setRawValue(''); // 隐藏值  
                        self.setValue('', true); // 显示值  
                    }  
                }  
            }  
        });  
        return self.picker;  
    },
    getSubmitValue: function() {//
    	return this.hiddenValue;
    }, 
    getSubmitData: function() {
    	var data = {};
    	data[this.name] = this.hiddenValue;
    	data[this.textFieldName || (this.name + "Name")] = this.getValue();
    	return data;
    },
    needInitValue: false,
    _initValue: '',
    initValue: function() {
    	if(!this.needInitValue) {
    		return;
    	}
    	var store = this.store;
    	var names = [];
    	var initValue = this._initValue.split(',');
    	for(var i=0; i<initValue.length; i++) {
    		var record = store.getNodeById(initValue[i]);
    		console.log('======record');
    		if (record) {
    				if (this.checkModel == 'single') {  
    					if(this.picker) {// TODO 此处代码有问题
	                    	this.picker.getSelectionModel().select(record);
    					}
    				} else {
    					store.getNodeById(initValue[i]).data.checked = true;
    				}
    				names.push(store.getNodeById(initValue[i]).data.text);
             }
    	}
    	this.setHiddenValue(this._initValue);
    	this.setValue(names.join(','), true); // 显示值  
    	this._initValue = '';
    	this.needInitValue = false;
    },
    setValue: function(value, isCustom) {
    	console.log('====setValue:'+value+',isCustom:'+isCustom+'=====>');
    	if(!isCustom) {
    		this.setExtValue(value);
    		this.initValue();
    	} else {
    		this.callParent(arguments);
    	}
    },
    setExtValue: function(values) {
    	if(!values) {
    		return;
    	}
    	this._initValue = values;
    	this.needInitValue = true;
    },
    setHiddenValue: function(hiddenValue) {
		console.log('====hiddenValue=====>' + hiddenValue);
		this.hiddenValue = hiddenValue;
		
		if(this.ownerCt) {
	    	if(this.cascadeChilds) {
	    		for(var i=0; i<this.cascadeChilds.length; i++) {
	    			var cascadeChild = this.cascadeChilds[i];
	    			//alert("级联下拉框必须设置级联子下拉框属性:cascadeChild");
		    		var cascadeParamName = cascadeChild.paramName || 'parentId';
			    	//this.listeners = Ext.apply({  
			         //   "select": function (combo, record, index) {  
			                
			        //    }  
			        //}, this.listeners);
			        var child = this.ownerCt.getComponent(cascadeChild.itemId);
				    child.getStore().getProxy().extraParams[cascadeParamName] = this.hiddenValue;
					child.getStore().reload();
	    		}
	    	}
		}
    },
    alignPicker: function() {  
        var me = this,  
        picker, isAbove, aboveSfx = '-above';  
        if (this.isExpanded) {  
            picker = me.getPicker();  
            if (me.matchFieldWidth) {  
                picker.setWidth(me.bodyEl.getWidth());  
            }  
            if (picker.isFloating()) {  
                picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tl  
                isAbove = picker.el.getY() < me.inputEl.getY();  
                me.bodyEl[isAbove ? 'addCls': 'removeCls'](me.openCls + aboveSfx);  
                picker.el[isAbove ? 'addCls': 'removeCls'](picker.baseCls + aboveSfx);  
            }  
        }  
    }  
});


调用方法

Ext.define('Plat.dept.org.role.RuleConditionWin', {
	extend: 'Ext.window.Window',
	requires: ['Ark.combo.ComboTree'],
	listeners: {
		afterrender: function() {
			assignDeptIds.setExtValue('id_1,id_2');
		}
	},
	items:[{  
		xtype: 'arkComboTree',
		name : 'assignDeptIds',   
		textFieldName: 'assignDeptNames',// 不设置,默认为 this.name+'Name' 
		storeUrl : PlatGlobal.contextpath + '/ark/org/orgnization/queryOrgWithChildrenById.do?withCheck=true',
		//'/ark/plat/dept/org/role/data.json',  
		//cascade : 'child',//级联方式:1.child子级联;2.parent,父级联,3,both全部级联  
		//checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选  
		// width : 270,  
		rootId : '1',  
		rootText : 'DRP',  
		extraParams : {
			parentId: 'SCENE_NODE_TYPE',
			withCheck: true
		}
	}]
});

// 级联使用示例
{  
	xtype: 'arkComboTree',
	fieldLabel : '场景图层',
	name : 'sceneLayerId',   
	editable: false,
	checkModel:'single',
	storeUrl : PlatGlobal.contextpath + '/ark/plat/paper/paperlayout/queryAllSceneLayer.do',
	//'/ark/plat/dept/org/role/data.json',  
	//cascade : 'child',//级联方式:1.child子级联;2.parent,父级联,3,both全部级联  
	//checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选  
	// width : 270,  
	rootId : '1',  
	rootText : 'DRP',  
	treeNodeParameter : '',
	// 级联配置
	cascadeChilds: [{
		itemId: 'sourceSceneElement',// 对应下面这个combox的itemId
		paramName: 'sceneLayerId'// 发送后台的参数名称
	}, {
		itemId: 'targetSceneElement',
		paramName: 'sceneLayerId'
	}]
},{
	xtype : 'enumCombo',
	editable: false,
	fieldLabel : '源场景元素',
	name : 'sourceSceneElement',
	itemId: 'sourceSceneElement',// 必须,级联下拉框中父下拉框需要根据这个itemId找到该下拉框
	dataUrl: PlatGlobal.contextpath + '/ark/plat/paper/paperlayout/querySceneElements.do',
	displayField: "name",  
	valueField: "id",  
	allowBlank : false
}


两种json格式的数据

一,不带复选框的数据

[{
    "text": "To Do", 
    "cls": "folder",
    "expanded": true,
    "children": [{
        "text": "Go jogging",
        "leaf": true
    },{
        "text": "Take a nap",
        "leaf": true
       
    },{
        "text": "Climb Everest",
        "leaf": true
       
    }]
},{
    "text": "Grocery List",
    "cls": "folder",
    "children": [{
        "text": "Bananas",
        "leaf": true
       
    },{
        "text": "Milk",
        "leaf": true
       
    },{
        "text": "Cereal",
        "leaf": true
       
    },{
        "text": "Energy foods",
        "cls": "folder",
        "children": [{
            "text": "Coffee",
            "leaf": true
           
        },{
            "text": "Red Bull",
            "leaf": true
           
        }]
    }]
},{
    "text": "Remodel Project", 
    "cls": "folder",
    "children": [{
        "text": "Finish the budget",
        "leaf": true
       
    },{
        "text": "Call contractors",
        "leaf": true
       
    },{
        "text": "Choose design",
        "leaf": true
       
    }]
}]


 

二.带复选框的数据

 

[{
    "text": "To Do", 
    "cls": "folder",
    "expanded": true,
    "children": [{
        "text": "Go jogging",
        "leaf": true,
        "checked": true
    },{
        "text": "Take a nap",
        "leaf": true,
        "checked": false
    },{
        "text": "Climb Everest",
        "leaf": true,
        "checked": false
    }]
},{
    "text": "Grocery List",
    "cls": "folder",
    "children": [{
        "text": "Bananas",
        "leaf": true,
        "checked": false
    },{
        "text": "Milk",
        "leaf": true,
        "checked": false
    },{
        "text": "Cereal",
        "leaf": true,
        "checked": false
    },{
        "text": "Energy foods",
        "cls": "folder",
        "children": [{
            "text": "Coffee",
            "leaf": true,
            "checked": false
        },{
            "text": "Red Bull",
            "leaf": true,
            "checked": false
        }]
    }]
},{
    "text": "Remodel Project", 
    "cls": "folder",
    "children": [{
        "text": "Finish the budget",
        "leaf": true,
        "checked": false
    },{
        "text": "Call contractors",
        "leaf": true,
        "checked": false
    },{
        "text": "Choose design",
        "leaf": true,
        "checked": false
    }]
}]


 


如果有帮助记得支持一下哦,可能也有不完善的地方欢迎改进!微笑

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部