extjs-3.4.1多选下拉框实现

js文件

 

if ('function' !== typeof RegExp.escape) {  
    RegExp.escape = function(s) {  
        if ('string' !== typeof s) {  
            return s  
        }  
        return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1')  
    }  
}  
Ext.ns('Ext.ux.form');  /*创建用于范围变量和类的命名空间，使它们不是全局性的*/
Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {  /*Ext.extend定义一个类或覆盖*/
    checkField: 'checked',  
    separator: ',',  
    initComponent: function() {  
        Ext.ux.form.LovCombo.superclass.initComponent.call(this);
        this.tpl = ['<tpl for=".">',  
                    '<div class="x-combo-list-item">',  
                    '<div class="ux-lovcombo-selectall-icon ux-lovcombo-iconux-lovcombo-icon-{[values.' + this.checkField + '?"checked":"unchecked"]}"',
                    '>{' + (this.displayField || 'text') + '}</div>',
                    '</div>',  
                    '</tpl>'  
                ].join("");  
  
        this.on({  
            scope: this,  
            expand : function(){  
                this.getValue()&&this.setValue(this.getValue());  
            }  
        });  
          
        this.onLoad = this.onLoad.createSequence(function() {  
            if (this.el) {  
                var v = this.el.dom.value;  
                this.el.dom.value = v  
            }  
        });  
        this.store.on("load",function(){  
            this.getValue()&&this.setValue(this.getValue());  
        },this);  
    },  
    initEvents: function() {  
        Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);
        this.keyNav.tab = false  
    },  
    clearValue: function() {  
        this.value = '';  
        this.setRawValue(this.value);  
        this.store.clearFilter();  
        this.store.each(function(r) {  
            r.set(this.checkField, false)  
        },this);  
        if(this.hiddenField) {  
            this.hiddenField.value = ''  
        }  
        this.applyEmptyText()  
    },  
    getCheckedDisplay: function() {  
        var re = new RegExp(this.separator, "g");  
        return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ')  
    },  
    getCheckedValue: function(field) {  
        field = field || this.valueField;  
        var c = [];  
        var snapshot = this.store.snapshot || this.store.data;  
        snapshot.each(function(r) {  
            if (r.get(this.checkField)) {  
                c.push(r.get(field))  
            }  
        },this);  
        return c.join(this.separator)  
    },  
  
    onBeforeQuery: function(qe) {  
        qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '')  
    },  
  
    onSelect: function(record, index) {  
        if (this.fireEvent('beforeselect', this, record, index) !== false){  
            record.set(this.checkField, !record.get(this.checkField));  
            if (this.store.isFiltered()) {  
                this.doQuery(this.allQuery)  
            }  
            this.setValue(this.getCheckedValue());  
            this.fireEvent('select', this, record, index)  
        }  
    },  
    setValue: function(v) {  
        if (v) {  
            v = '' + v;  
            if (this.valueField) {  
                this.store.clearFilter();  
                this.store.each(function(r) {  
                    var checked = !(!v.match('(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField)) + '(' + this.separator + '|$)'));  
                    r.set(this.checkField, checked)  
                },this);  
                this.value = this.getCheckedValue() || v;  
                this.setRawValue(this.store.getCount()>0 ? this.getCheckedDisplay() : this.value);  
                if (this.hiddenField) {  
                    this.hiddenField.value = this.value  
                }  
            } else {  
                this.value = v;  
                this.setRawValue(v);  
                if (this.hiddenField) {  
                    this.hiddenField.value = v  
                }  
            }  
            if (this.el) {  
                this.el.removeClass(this.emptyClass)  
            }  
            if(this.selectall){  
                if(this.getCheckedValue().split(",").length == this.store.getCount()){  
                    this.selectall.replaceClass("ux-combo-selectall-icon-unchecked","ux-combo-selectall-icon-checked");  
                }else{  
                    this.selectall.replaceClass("ux-combo-selectall-icon-checked","ux-combo-selectall-icon-unchecked")  
                }  
            }  
        } else {  
            this.clearValue()  
        }  
          
    },  
    initList : function(){  
        if(!this.list){  
            var cls = 'x-combo-list';  
  
            this.list = new Ext.Layer({  
                parentEl: this.getListParent(),  
                shadow: this.shadow,  
                cls: [cls, this.listClass].join(' '),  
                constrain:false  
            });  
  
            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);  
            this.list.setSize(lw, 0);  
            this.list.swallowEvent('mousewheel');  
            this.assetHeight = 0;  
            if(this.syncFont !== false){  
                this.list.setStyle('font-size', this.el.getStyle('font-size'));  
            }  
            if(this.title){  
                this.header = this.list.createChild({cls:cls+'-hd', html: this.title});  
                this.assetHeight += this.header.getHeight();  
            }  
              
            if(this.showSelectAll){  
                this.selectall = this.list.createChild({  
                    cls:cls + 'item ux-combo-selectall-icon-unchecked ux-combo-selectall-icon',  
                    html: "选择全部"  
                });  
                this.selectall.on("click",function(el){  
                    if(this.selectall.hasClass("ux-combo-selectall-icon-checked")){  
                        this.selectall.replaceClass("ux-combo-selectall-icon-checked","ux-combo-selectall-icon-unchecked");  
                        this.deselectAll();  
                    }else{  
                        this.selectall.replaceClass("ux-combo-selectall-icon-unchecked","ux-combo-selectall-icon-checked")  
                        this.selectAll();  
                    }  
                },this);  
            }  
  
            this.innerList = this.list.createChild({cls:cls+'-inner'});  
            this.mon(this.innerList, 'mouseover', this.onViewOver, this);  
            this.mon(this.innerList, 'mousemove', this.onViewMove, this);  
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));  
  
            if(this.pageSize){  
                this.footer = this.list.createChild({cls:cls+'-ft'});  
                this.pageTb = new Ext.PagingToolbar({  
                    store: this.store,  
                    pageSize: this.pageSize,  
                    renderTo:this.footer  
                });  
                this.assetHeight += this.footer.getHeight();  
            }  
  
            if(!this.tpl){  
                this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';  
            }  
  
            this.view = new Ext.DataView({  
                applyTo: this.innerList,  
                tpl: this.tpl,  
                singleSelect: true,  
                selectedClass: this.selectedClass,  
                itemSelector: this.itemSelector || '.' + cls + '-item',  
                emptyText: this.listEmptyText  
            });  
  
            this.mon(this.view, 'click', this.onViewClick, this);  
  
            this.bindStore(this.store, true);  
  
            if(this.resizable){  
                this.resizer = new Ext.Resizable(this.list,  {  
                   pinned:true, handles:'se'  
                });  
                this.mon(this.resizer, 'resize', function(r, w, h){  
                    this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;  
                    this.listWidth = w;  
                    this.innerList.setWidth(w - this.list.getFrameWidth('lr'));  
                    this.restrictHeight();  
                }, this);  
  
                this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');  
            }  
        }  
    },  
    expand : function(){  
        if(this.isExpanded() || !this.hasFocus){  
            //return;  
        }  
        this.list.alignTo(this.wrap, this.listAlign);  
        this.list.show();  
        if(Ext.isGecko2){  
            this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac  
        }  
        Ext.getDoc().on({  
            scope: this,  
            mousewheel: this.collapseIf,  
            mousedown: this.collapseIf  
        });  
        this.fireEvent('expand', this);  
    },  
    selectAll: function() {  
        this.store.each(function(record) {  
            record.set(this.checkField, true);  
        },this);  
        this.setValue(this.getCheckedValue());  
        this.doQuery(this.allQuery);  
    },  
    deselectAll: function() {  
        this.clearValue()  
    },  
    assertValue: Ext.emptyFn,  
    beforeBlur: Ext.emptyFn  
});  
Ext.reg('lovcombo', Ext.ux.form.LovCombo);  /* 用于创建模型类;Ext.reg(模型的类的名称,想要创建模型的配置对象)*/

css文件

 

 

.ux-combo-selectall{
    padding:3px;
}
.ux-combo-selectall-icon-checked{
    background: transparent url(../ext-3.4.1/resources/images/default/menu/checked.gif);
}
.ux-combo-selectall-icon-unchecked {
    background: transparent url(../ext-3.4.1/resources/images/default/menu/unchecked.gif);
}
.ux-lovcombo-iconux-lovcombo-icon-checked{
    background: transparent url(../ext-3.4.1/resources/images/default/menu/checked.gif);
    text-indent:1.8em;
}
.ux-lovcombo-iconux-lovcombo-icon-unchecked {
    background: transparent url(../ext-3.4.1/resources/images/default/menu/unchecked.gif);
    text-indent:1.8em;
}
.ux-combo-selectall-icon {
    text-indent:1.8em;
    background-position: 3px 2px ! important;
    background-repeat:no-repeat ! important;
    height:22px;
    line-height:20px;
    font-size:12px;
    font-weight:bold;
    -moz-user-select:none;
}
.ux-lovcombo-selectall-icon{
    text-indent:1.8em;
    background-position: 3px 2px ! important;
    background-repeat:no-repeat ! important;
    height:22px;
    line-height:20px;
    font-size:12px;
    -moz-user-select:none;
}

引用

 

 

<%@ 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" />
  <link rel="stylesheet" type="text/css"   href="${contextPath }/static/ext-3.4.1/resources/css/ext-all.css" />
<%--  <link rel="stylesheet" type="text/css"   href="${contextPath }/static/ext-3.4.1/resources/css/ext-patch.css" />--%>
  <link rel="stylesheet" type="text/css" href="${contextPath }/static/css/com.css"/>
  <script type="text/javascript" src="${contextPath }/static/ext-3.4.1/adapter/ext/ext-base-debug.js"></script>
  <script type="text/javascript" src="${contextPath }/static/ext-3.4.1/ext-all-debug.js"></script>
  <script type="text/javascript" src="${contextPath }/static/js/LovCombo.js"></script>
  <title>无标题文档</title>
</head><body>
<div id="cbo"></div>
<input type="button" onclick="getValues('cc');" value="获取值" /><br /><br />
</body>
</html>
<script language="javascript" type="text/javascript">
  Ext.namespace("Ext.ux.form");

  var ds=new Ext.data.JsonStore({
    //results 表示结果数
    //rows 表示从后台传过来的JSON数据
    data:{ "results": 6, "rows":[
      {"id":1, "text": "别奇科技", "value": "1001" },
      {"id":2, "text": "四川兆益", "value": "1002" },
      {"id":3, "text": "重庆赛格", "value": "1003" },
      {"id":4, "text": "全球鹰", "value": "1004" },
      {"id":5, "text": "宝石花", "value": "1005" },
      {"id":6, "text": "重庆电信", "value": "1006" } ]},

    autoLoad:true,
    totalProperty:"results",
    root:"rows",
    fields:['id','text','value']
  });

  Ext.ux.form.LovCombo = Ext.form.LovCombo || Ext.ux.form.LovCombo;
  var combox = new Ext.ux.form.LovCombo({
   /* renderTo        : Ext.getBody(),*///一种方式
    renderTo: "cbo",/*第二种方式*/
    store: ds,
    mode: "local",
    fieldLabel : "测试",
    displayField: "text",
    valueField : "value",
    hiddenName: "ces",
    name: "ces",
    triggerAction: "all",
    id: "cc",
    width: 520,
    autoSelect: true,
    showSelectAll: true,
    resizable: true
  });

  function getValues(v){
    var data = Ext.getCmp(v).getValue();
    alert(data);
  }
</script>