ext-4.0.0多选下拉框源码实现案例

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">&nbsp;</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">&nbsp;</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>