| |
前些日子，有网友问，有没有extjs4.1下能用的带复选功能的下拉框，答应帮他看看之后，下载了extjs4.1（最近很忙，快赶上皮鞋的忙劲了）。然后找了一些资料，做了一个简单的带复选框的下拉框插件。
顺带的说下 extjs4中的动态加载功能非常好用，之前做的一些DEMO都是直接加载了所需要的js文件。那么以后，我做的DEMO将直接引用extjs主文件，并使用动态加载来完成DEMO的运行。注意：由于使用的是动态加载，在运行DEMO之前，请配置好你的IIS或者apache，切勿直接双击html运行DEMO，至于为什么要配置运行环境，简单的来说，本地js的权限不够，具体的原因，请百度或者谷歌（推荐谷歌）。
1、目录结构：根目录放置了ext-all-debug.js、resources文件夹（里面是extjs的css文件）、ux文件夹（插件目录）、demo文件夹（各种demo）如下图：
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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>MHZG.NET-extjs4.1带复选框的下拉框</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: '选项一 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>
复制代码
最后，需要注意的是，无论我们如何组建目录结构，只要我们将目录结构顺序弄明白了，一切都好解决！
原文链接：http://www.mhzg.net/a/20126/20126513220624.html |
|
