js 文件
Ext.define('Ext.ux.CheckCombo',{ extend: 'Ext.form.field.ComboBox', alias: 'widget.checkcombo', multiSelect: true, allSelector: false, addAllSelector: false, allText: 'All', createPicker: function() { var me = this, picker, menuCls = Ext.baseCSSPrefix + 'menu', opts = Ext.apply({ pickerField: me, selModel: { mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' }, floating: true, hidden: true, ownerCt: me.ownerCt, cls: me.el.up('.' + menuCls) ? menuCls : '', store: me.store, displayField: me.displayField, focusOnToFront: false, pageSize: me.pageSize, tpl: [ '<ul><tpl for=".">', '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="x-combo-checker"> </span> {' + me.displayField + '}</li>', '</tpl></ul>' ] }, me.listConfig, me.defaultListConfig); picker = me.picker = Ext.create('Ext.view.BoundList', opts); if (me.pageSize) { picker.pagingToolbar.on('beforechange', me.onPageChange, me); } me.mon(picker, { itemclick: me.onItemClick, refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { 'beforeselect': me.onBeforeSelect, 'beforedeselect': me.onBeforeDeselect, 'selectionchange': me.onListSelectionChange, scope: me }); return picker; }, getValue: function() { return this.value.join(','); }, getSubmitValue: function() { return this.getValue(); }, expand: function() { var me = this, bodyEl, picker, collapseIf; if (me.rendered && !me.isExpanded && !me.isDestroyed) { bodyEl = me.bodyEl; picker = me.getPicker(); collapseIf = me.collapseIf; //��ʾ picker.show(); me.isExpanded = true; me.alignPicker(); bodyEl.addCls(me.openCls); if(me.addAllSelector == true && me.allSelector == false) { me.allSelector = picker.getEl().insertHtml('afterBegin', '<div class="x-boundlist-item" role="option"><span class="x-combo-checker"> </span> '+me.allText+'</div>', true); me.allSelector.on('click', function(e) { if(me.allSelector.hasCls('x-boundlist-selected')) { me.allSelector.removeCls('x-boundlist-selected'); me.setValue(''); me.fireEvent('select', me, []); } else { var records = []; me.store.each(function(record) { records.push(record); }); me.allSelector.addCls('x-boundlist-selected'); me.select(records); me.fireEvent('select', me, records); } }); } // ���� me.mon(Ext.getDoc(), { mousewheel: collapseIf, mousedown: collapseIf, scope: me }); Ext.EventManager.onWindowResize(me.alignPicker, me); me.fireEvent('expand', me); me.onExpand(); } }, onListSelectionChange: function(list, selectedRecords) { var me = this, isMulti = me.multiSelect, hasRecords = selectedRecords.length > 0; if (me.isExpanded) { if (!isMulti) { Ext.defer(me.collapse, 1, me); } if (isMulti || hasRecords) { me.setValue(selectedRecords, false); } if (hasRecords) { me.fireEvent('select', me, selectedRecords); } me.inputEl.focus(); } if(me.addAllSelector == true && me.allSelector != false) { if(selectedRecords.length == me.store.getTotalCount()) me.allSelector.addCls('x-boundlist-selected'); else me.allSelector.removeCls('x-boundlist-selected'); } } });
css文件
.ux-lovcombo-icon { width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important; } .ux-lovcombo-icon-checked { background: transparent url(resources/themes/images/default/menu/checked.gif); } .ux-lovcombo-icon-unchecked { background: transparent url(resources/themes/images/default/menu/unchecked.gif); }
测试引用
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MHZG.NET-带复选框的下拉框</title> <link rel="stylesheet" type="text/css" href="${contextPath }/static/ext-4.0.0/resources/css/ext-all.css" /> <link type="text/css" rel="stylesheet" href="${contextPath }/static/com.css"/> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" /> <script type="text/javascript" src="${contextPath }/static/ext-4.0.0/ext-all.js"></script> <script type="text/javascript" src="${contextPath }/static/ext-all-debug.js"></script> <script type="text/javascript" src="${contextPath }/static/ext-4.0.0/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="${contextPath }/static/ux/CheckCombo.js"></script> <script type="text/javascript"> Ext.Loader.setConfig({ enabled: true }); Ext.Loader.setPath('Ext.ux', '/ux'); var store = Ext.create('Ext.data.Store',{ fields: ['id', 'type'], data: [ {id: '1', type: '选项一 extjs4.1'}, {id: '2', type: '选项二 extjs4'}, {id: '3', type: '选项三 extjs 4.1 下拉复选框'}, {id: '4', type: '选项四 mhzg.net'}, {id: '5', type: '选项五 mhzg extjs4'}, {id: '6', type: '选项六 mhzg.net extjs 4.1'}, {id: '7', type: '选项七 exjts4.x'} ] }); Ext.onReady(function(){ //没有全选功能的CheckCombo Ext.create('Ext.ux.CheckCombo',{ renderTo: 'cbo', width:180, id:'box1', valueField: 'id', displayField: 'type', store: store }); //带全选功能的CheckCombo Ext.create('Ext.ux.CheckCombo',{ renderTo: 'cba', valueField: 'id', displayField: 'type', id:'box2', width:180, allText:'全选',//默认字符是All store: store, addAllSelector: true }); }) function getValues(v){ var data = Ext.getCmp(v).getValue(); alert(data); } </script> </head> extjs 4.1 没有全选功能的下拉复选框<br /><br /> <div id="cbo"></div> <input type="button" onclick="getValues('box1');" value="获取值" /><br /><br /> -------------------------------------分割线-------------------------------------<br /><br /> extjs 4.1 下拉复选框，并带全选功能<br /><br /> <div id="cba"></div> <input type="button" onclick="getValues('box2');" value="获取值" /> <body> </body> </html>
