extjs多选下拉框

extjs多选下拉框

一、用LovCombo。js插件实现

LovCombo脚本文件

  •  
  • JScript 代码   复制
  • 
    // vim: ts=4:sw=4:nu:fdc=4:nospell
    /**
    * Ext.ux.form.LovCombo, List of Values Combo
    *
    * @author    Ing. Jozef Sakáloš
    * @copyright (c) 2008, by Ing. Jozef Sakáloš
    * @date      16. April 2008
    * @version   $Id: Ext.ux.form.LovCombo.js 285 2008-06-06 09:22:20Z jozo $
    *
    * @license Ext.ux.form.LovCombo.js is licensed under the terms of the Open Source
    * LGPL 3.0 license. Commercial use is permitted to the extent that the 
    * code/component(s) do NOT become part of another Open Source or Commercially
    * licensed development library or toolkit without explicit permission.
    * 
    * License details: http://www.gnu.org/licenses/lgpl.html
    */
    
    /*global Ext */
    
    // add RegExp.escape if it has not been already added
    if ('function' !== typeof RegExp.escape) {
        RegExp.escape = function(s) {
            if ('string' !== typeof s) {
                return s;
            }
            // Note: if pasting from forum, precede ]// with backslash manually
            return s.replace(/([.*+?^=!:${}()|[/]////])/g, '//$1');
        }; // eo function escape
    }
    
    // create namespace
    Ext.ns('Ext.ux.form');
    
    /**
    *
    * @class Ext.ux.form.LovCombo
    * @extends Ext.form.ComboBox
    */
    Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {
    
        // {{{
        // configuration options
        /**
        * @cfg {String} selectAllOn the value of the option used as 
        * the select-all / deselect-all trigger
        */
        selectAllOn: null,
        /**
        * @cfg {String} checkField name of field used to store checked state.
        * It is automatically added to existing fields.
        * Change it only if it collides with your normal field.
        */
        checkField: 'checked'
    
        /**
        * @cfg {String} separator separator to use between values and texts for getValue and submission
        */
        , separator: ','
    
        /**
        * @cfg {String} displaySeparator displaySeparator to use between values and texts for display
        */
        , displaySeparator: ','
    
        /**
        * @cfg {String/Array} tpl Template for items. 
        * Change it only if you know what you are doing.
        */
        // }}}
        // {{{
        , initComponent: function() {
    
            // template with checkbox
            if (!this.tpl) {
                this.tpl =
                     '<tpl for=".">'
                    + '<li class="x-combo-list-item">'
                    + '<img src="' + Ext.BLANK_IMAGE_URL + '" mce_src="' + Ext.BLANK_IMAGE_URL + '" '
                    + 'class="ux-lovcombo-icon ux-lovcombo-icon-'
                //+'{[values.' + this.checkField + '?"checked":values.' + this.checkField + '===null?"mixed":"unchecked"' + ']}">'
                    + '{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
                    + '<li class="ux-lovcombo-item-text">{' + (this.displayField || 'text') + '}</li>'
                    + '</li>'
                    + '</tpl>'
                ;
            }
    
            // call parent
            Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);
    
            // install internal event handlers
            this.on({
                scope: this
                , beforequery: this.onBeforeQuery
                //,blur:this.onRealBlur
            });
    
            // remove selection from input field
            this.onLoad = this.onLoad.createSequence(function() {
                if (this.el) {
                    var v = this.el.dom.value;
                    this.el.dom.value = '';
                    this.el.dom.value = v;
                }
            });
    
        } // e/o function initComponent
        // }}}
        // {{{
        /**
        * Disables default tab key bahavior
        * @private
        */
        , initEvents: function() {
            Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);
    
            // disable default tab handling - does no good
            this.keyNav.tab = false;
    
        } // eo function initEvents
        // }}}
        // {{{
        /**
        * clears value
        */
        , 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();
        } // eo function clearValue
        // }}}
        // {{{
        /**
        * @return {String} separator (plus space) separated list of selected displayFields
        * @private
        */
        , getCheckedDisplay: function() {
            var re = new RegExp(RegExp.escape(this.separator), "g");
            return this.getCheckedValue(this.displayField).replace(re, RegExp.escape(this.displaySeparator) + ' ');
        } // eo function getCheckedDisplay
        // }}}
        // {{{
        /**
        * @return {String} separator separated list of selected valueFields
        * @private
        */
        , getCheckedValue: function(field) {
            field = field || this.valueField;
            var c = [];
    
            // store may be filtered so get all records
            var snapshot = this.store.snapshot || this.store.data;
            snapshot.each(function(r) 标签: