2、CheckCombo.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');
- }
- }
- });
3、checkbox-combobox.html： - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www./1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>MHZG.NET-extjs4.1帶復(fù)選框的下拉框</title>
- <link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css" />
- <script type="text/javascript" src="/ext-all-debug.js"></script>
- <script type="text/javascript" src="/locale/ext-lang-zh_CN.js"></script>
- <style type="text/css">
- body{ padding:10px;}
- .x-combo-checker { background-position: 50% -2px; margin-left: 1px; background-color: transparent; background-image: url("/resources/themes/images/default/grid/unchecked.gif"); background-position: -1px -1px; background-repeat: no-repeat; height: 14px; width: 14px; display: inline-block; }
- .x-boundlist-selected .x-combo-checker { background-image: url("/resources/themes/images/default/grid/checked.gif"); }
-
- </style>
- <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: '選項(xiàng)一 extjs4.1'},
- {id: '2', type: '選項(xiàng)二 extjs4'},
- {id: '3', type: '選項(xiàng)三 extjs 4.1 下拉復(fù)選框'},
- {id: '4', type: '選項(xiàng)四 mhzg.net'},
- {id: '5', type: '選項(xiàng)五 mhzg extjs4'},
- {id: '6', type: '選項(xiàng)六 mhzg.net extjs 4.1'},
- {id: '7', type: '選項(xiàng)七 exjts4.x'}
- ]
- });
- Ext.onReady(function(){
-
- Ext.create('Ext.ux.CheckCombo',{
- renderTo: 'cbo',
- width:180,
- id:'box1',
- valueField: 'id',
- displayField: 'type',
- store: store
- });
-
- Ext.create('Ext.ux.CheckCombo',{
- renderTo: 'cba',
- valueField: 'id',
- displayField: 'type',
- id:'box2',
- width:180,
- allText:'全選',
- store: store,
- addAllSelector: true
- });
- })
- function getValues(v){
- var data = Ext.getCmp(v).getValue();
- alert(data);
- }
- </script>
- </head>
- extjs 4.1 沒有全選功能的下拉復(fù)選框<br /><br />
- <div id="cbo"></div>
- <input type="button" onclick="getValues('box1');" value="獲取值" /><br /><br />
- -------------------------------------分割線-------------------------------------<br /><br />
- extjs 4.1 下拉復(fù)選框，并帶全選功能<br /><br />
- <div id="cba"></div>
- <input type="button" onclick="getValues('box2');" value="獲取值" />
- <body>
- </body>
- </html>
最后，需要注意的是，無論我們?nèi)绾谓M建目錄結(jié)構(gòu)，只要我們將目錄結(jié)構(gòu)順序弄明白了，一切都好解決！
源碼下載地址:
http://pan.baidu.com/s/1zht1s
|
