Extjs让combobox写起来简洁又漂亮
也已经写了很久时间的extjs，每次都用到很多的combobox，配置很多东西觉得实在是太麻烦，所以根据常用到的情况写了一个简便的combobox，再次记录下来，以免放在某个地方忘记了找不到了。
定义一个基本的baseCombobox类，如下。
Ext.define('Admin.view.baseCmp.BaseCombobox',{
extend:'Ext.form.field.ComboBox',
xtype:'baseCombobox',
editable:false,
labelSeparator:':',
labelWdith:0,
triggerAction:'all',
labelAlign:'right',
//forceSelection:true,此属性操作时，就算去掉文字后，失去焦点后还是会选择上一次选择的记录
autoSelect:true,
selectOnfocus:true,
valueNotFoundText:'',
name:'',
queryMode:'local',
url:'',
displayField:'',
valueField:'',
requires:['Admin.view.baseCmp.BaseComboboxController'],
controller:'baseComboboxController',
emptyIndex:-1,//自定义属性,空值所在下标，-1则不添加
selectIndex:0,//自定义属性，自动选择下标
params:null,//自定义属性，数据参数
listeners:{
render:'getComboData',
scope:'controller'
},
});
Ext.define('Admin.view.baseCmp.BaseComboboxController',{
extend:'Ext.app.ViewController',
alias:'controller.baseComboboxController',
getComboData:function(combo){
Ext.Ajax.request({
url:combo.url,
method:'POST',
params:combo.params,
success:function(response){
vardataJson=Ext.decode(response.responseText);
if(dataJson.state!=200||dataJson.data==null||dataJson.data.length==0)
{
//服务器返回错误
return;
}
vardata=dataJson.data;
//插入“全部”选项
if(combo.emptyIndex>=0)
{
varemp={};
emp[combo.displayField]="全部";
emp[combo.valueField]="全部";
Ext.Array.insert(data,combo.emptyIndex,[emp]);
}
varstore=Ext.create('Ext.data.Store',{
fields:Ext.Object.getKeys(data[0]),
data:data
});
combo.setStore(store);
//如果指定选中某个值
if(combo.selectValue!=null)
{
combo.select(combo.selectValue);
}
else
{
//如果指定选中某个下标的值，-1为最后一个，>0则为第selectIndex个
if(combo.selectIndex==-1)
{
console.log(data.length-1);
combo.select(data[data.length-1][combo.valueField]);
}
else
{
combo.select(data[combo.selectIndex][combo.valueField]);
}
}
//触发选中事件
//combo.fireEvent('select',combo,store.getAt(combo.selectIndex));
},
failure:function(response){
//请求服务器失败
}
});
}
});
调用实例：
{
xtype:'baseCombobox',
name:"typeName",
fieldLabel:"类型",
displayField:'typeName',
valueField:'id',
emptyIndex:0,
multiSelect:false,
url:"/itemType/list",
listeners:{
select:'query'
}
},
这样大大方便了我使用combobox，如果某种类型的combobox需要重复使用，建议还是直接定义好他，到需要用的时候一句：
xtype:'itemTypeCombobox',就可以搞定了，代码看起来简洁又漂亮。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。