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="" />
相关文章推荐
- Extjs 4.2 comboBox下拉复选框 checkbox
- ExtJS4.2实例:表格(Grid)含联动的下拉列表(Combobox)
- VC++ VS2010 MFC 配合串口控件MSCOMM 复选框CheckBox 下拉ComboBox来选择打开串口端口
- ExtJS4.2 下拉列表Combobox级联选择
- ExtJs——ComboBox(下拉列表、从后台读取数据、带分页)!!!
- ExtJs 入门教程二十二[动态复选框:RemoteCheckboxGroup]
- EXTJS 4.2 资料 控件之checkboxgroup的用法(动态数据)
- ExtJs之treePanel checkbox 复选框
- extjs combobox 仿百度查询功能,设置下拉列表宽度
- 无废话ExtJs 入门教程十一[下拉列表:Combobox]
- Extjs 3实现Combobox下拉列表的拼音过滤
- 在ExtJS的ComboBox组件中实现下拉树效果
- ExtJS的下拉选单Combobox中空选项的高度问题
- ExtJs中checkboxgroup复选框组件的显示问题
- ExtJs6.0之下拉框ComboBox
- ExtJS ComboBox 下拉列表详细用法
- 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]
- 无废话ExtJs 入门教程二十二[动态复选框:RemoteCheckboxGroup]
- extjs tree checkbox 复选框实现 取值 显示
- Extjs的ComboBox没有右侧下拉按钮