也已经写了很久时间的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',就可以搞定了,代码看起来简洁又漂亮。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
Extjs,combobox
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“Extjs让combobox写起来简洁又漂亮”评论...
更新日志
2025年10月27日
2025年10月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]