通用下拉框实现&带级联
程序员文章站
2022-07-14 18:07:51
...
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
上一篇: Bootstrap下拉框带搜索
下一篇: Android实现倒计时跳转和延时操作