您的位置:首页 > Web前端 > JavaScript

Extjs 4.2 comboBox下拉复选框 checkbox

2014-09-18 15:21 429 查看
Ext.create('Ext.form.field.ComboBox',{
name : 'cmb',
fieldLabel : '人员',
margin:'2 0 2 0',
labelWidth : 135,
labelAlign : 'right',
editable : false,
allowBlank : false,
multiSelect : true,
store : {
fields : ['personId', 'personName'],
data : [
{'personId':'0',personName:'张三'},
{'personId':'1',personName:'李四'},
{'personId':'2',personName:'王五'},
{'personId':'3',personName:'小名'}
]
},
listConfig : {
itemTpl : Ext.create('Ext.XTemplate','<input type=checkbox>{[values.personName]}'),
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;
}
}
}
}
},
queryMode : 'local',
displayField : 'personName',
valueField : 'personId',
renderTo : Ext.getBody()
});

效果

演示:http://sandbox.runjs.cn/show/9k6fnqa8

截图:<img src="https://img-blog.csdn.net/20141020161052934?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva3VuNTI1MzMxMTk0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息