效果图:
Extjs 有着丰富的组件,但是在API里面却没有直接写好的checkbox下拉框组件,这个时候对于新手来说可能有点蒙了,但是在好好看看Extjs的API后我们不难发现,我们可以通过自己设计拼装出checkbox下拉框主键(所有组件都一样的,都是在基本组件的基础上拼装而成的)。
我们通过两个组件得到我们想要的checkbox下拉框:
1. Ext.form.field.ComboBox 下拉框组件
2. Ext.XTemplate 模板组件
其实,在combo组件的配置项中我们就可以看到,combo是支持使用XTemplate的,所以下拉框我们就可以用combo而checkbox则用XTemplate自己写就可以了。
{
xtype: 'combo',
name: 'status',
id: 'statusId',
multiSelect: true,
editable: false,
emptyText: justsyLang.strategyExecutionStatus, //'策略执行状态',
queryMode: 'local',
store: status,
valueField: 'id',
displayField: 'name',
listConfig: {
itemTpl: '<tpl for="."><div class="x-combo-list-item"><span> {name}</span></div></tpl>',
},
queryMode: 'local',
triggerAction: 'all',
},
备注:multiSelect 默认为false表示单选,如果需要支出多选则设置为true。
从上面我们就可以得到一个简单的checkbox了,但是这样的checkbox是不完美的,在做选择的时候点击checkbox框和点击下拉内容都表示选择了该项,但是只有点击checkbox的时候checkbox才表现出选中的效果,所以我们需要给他添加一些方法,保证checkbox的打钩和没打钩表现出选中和未选中的统一性;
//在listConfig中添加下面的方法
onItemSelect: function(record) {
var node = this.getNode(record);
if (node) {
Ext.fly(node).addCls(this.selectedItemCls);
var checkboxs = node.getElementsByTagName("input");
if(checkboxs!=null){
var checkbox = checkboxs[0];
checkbox.checked = true;
}
}
这样总有让一个简单的checkbox成型了。
可能在项目中,我们对checkbox下拉框的需求量较大,这样的话,我们就可以直接把checkbox下拉框做出一个自己封装的组件的形式存在,这样就不需要重复的写了,每次需要的时候只用通过xtype调用就可以了。
ps:下面直接写成组件形式的代码引用自网络,自己就一个地方用到也就没刻意的去写了
Ext.define('MDM.view.custom.MultiComboBox', {
extend: 'Ext.form.ComboBox',
alias: 'widget.multicombobox',
xtype: 'multicombobox',
initComponent: function(){
this.multiSelect = true;
this.listConfig = {
itemTpl : Ext.create('Ext.XTemplate',
'<input type=checkbox>{value}'),//这边value的要改成下拉框显示所对应的displayField字段,例如:values。name
onItemSelect: function(record) {
var node = this.getNode(record);
if (node) {
Ext.fly(node).addCls(this.selectedItemCls);
var checkboxs = node.getElementsByTagName("input");
if(checkboxs!=null)
{
var checkbox = checkboxs[0];
checkbox.checked = true;
}
}
},
listeners:{
itemclick:function(view, record, item, index, e, eOpts ){
var isSelected = view.isSelected(item);
var checkboxs = item.getElementsByTagName("input");
if(checkboxs!=null)
{
var checkbox = checkboxs[0];
if(!isSelected)
{
checkbox.checked = true;
}else{
checkbox.checked = false;
}
}
}
}
}
this.callParent();
}
});
在下拉框中想要默认显示动态数据,可以在下拉框添加监听事件
{
xtype:'multicombobox',
columnWidth :1,
fieldLabel : '商务人员',
margin : '10 20 10 0',
labelAlign:"right",
// allowBlank: false,
id:'modifyProjectDetailsFieldBusinessPeopleId',
store : businessPeopleStore,
triggerAction: 'all',
displayField: "name",
valueField: "id",
editable: false,
multiSelect:true,
listeners:{
afterRender : function(combo) {
var supplierselection = Ext.getCmp('crgridqw').getSelectionModel().getSelection();
firstValue = supplierselection[0].data.businessPeopleName
combo.setValue(firstValue);//可以使用setValue进行数据的显示,如果要显示固定数据可以直接写死,或者添加默认属性,显示
}
}
}
本文主要 转载于: http://shimengwen.blog.51cto.com/2448562/1360820