您的位置：首页 > Web前端 > extjs > 正文

extjs多选下拉框

更多 时间：2014-5-6 类别：Web前端 浏览量：3904

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) 
 
    
  
    标签：extjs 下拉框   
    
 
    
 
    

    

    
              
  • 上一篇：如何获取存储过程返回值
    •                 	  
			  
  • 下一篇：left join on 查询
    • 

  
     


    
  
    
      您可能感兴趣
    • 首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利