我要评论也已经写了很久时间的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) {
var datajson = ext.decode(response.responsetext);
if(datajson.state != 200 || datajson.data == null || datajson.data.length == 0)
{
//服务器返回错误
return ;
}
var data = datajson.data;
//插入“全部”选项
if(combo.emptyindex >= 0)
{
var emp = {};
emp[combo.displayfield] = "全部";
emp[combo.valuefield] = "全部";
ext.array.insert(data,combo.emptyindex,[emp]);
}
var store = 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',就可以搞定了，代码看起来简洁又漂亮。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持代码网。
发表评论