通用下拉框实现&带级联

2019独角兽企业重金招聘Python工程师标准>>>

Ext.define('Plat.comp.EnumCombo', {
	extend : 'Ext.form.field.ComboBox',
	alias : 'widget.enumCombo',
	dataUrl : '',// 请求绑定数据的地址
	emptyText : "请选择...",
	mode : 'local',
	queryMode : 'local',
	forceSelection : true,
	triggerAction : 'all',
	typeAhead : true,
	selectOnFocus : true,
	//valueField : 'value',
	//displayField : 'key',
	setValue: function(v) {
		console.log('=========>' + v);
		
		this.callParent(arguments);
		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);
                    if(!child) {
                    	child = this.up('form') && this.up('form').down('[itemId='+cascadeChild.itemId+']');
                    }
                    if(child) {
                    	if(child.getStore) {
	                    	child.getStore().getProxy().extraParams[cascadeParamName] =  this.getValue();
	                    	child.getStore().reload();
                    	}
                    	child.onCascade && child.onCascade(this.getValue());
                    }
                }
            }
		}
	},
	initComponent : function() {
	
		var valueField = this.valueField || 'value';
		var displayField = this.displayField || 'key';
		
		this.store = Ext.create('Ext.data.Store', {
			fields : [{
				type : 'string',
				name : displayField
			}, {
				type : 'string',
				name : valueField
			}],
			proxy : {
				type : 'ajax',
				url : this.dataUrl,
				reader : {
					type : 'json'
				}
			}
		});
		this.store.load();
		this.callParent(arguments);
	}
});

使用示例

{  
		        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
            }

转载于:https://my.oschina.net/darkness/blog/362660