Extjs让combobox写起来简洁又漂亮
作者：鱼草野
代码看起来简洁又漂亮是如何做到的，这篇文章主要为大家详细介绍了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) {
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',就可以搞定了，代码看起来简洁又漂亮。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。