extjs 多选下拉框

最新推荐文章于 2020-12-24 05:26:02 发布
转载 最新推荐文章于 2020-12-24 05:26:02 发布 · 1.5k 阅读 · 0

[ http://blog.sina.com.cn/s/blog_5140a6a50100bfao.html]，简要记录。


一. 自定义组建组建 Ext.form.MultiSelect，新建MultiSelect.js文件，目录自定，但页面上需要把这个js引入，该js文件如下：

[javascript] view plain copy print ?
  1. // vim: ts=4:sw=4:nu:fdc=4:nospell 
  2.   
  3. // add RegExp.escape if it has not been already added 
  4. if('function' !== typeof RegExp.escape) { 
  5. RegExp.escape = function(s) { 
  6.    if('string' !== typeof s) { 
  7.     return s; 
  8.    } 
  9.    // Note: if pasting from forum, precede ]/\ with backslash manually 
  10.    return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1'); 
  11. }; // eo function escape 
  12. } 
  13. // create namespace 
  14. Ext.ns('Ext.form'); 
  15.  
  16. Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox, { 
  17. // {{{ 
  18.     // configuration options 
  19.  
  20. checkField:'checked' 
  21.  
  22.     ,separator:',' 
  23.  
  24. // }}} 
  25.     // {{{ 
  26.     ,initComponent:function() { 
  27.         
  28.    // template with checkbox 
  29.    if(!this.tpl) { 
  30.     this.tpl = 
  31.      '<tpl for=".">' 
  32.      +'<div class="x-combo-list-item">' 
  33.      +'<img src="' + Ext.BLANK_IMAGE_URL + '" ' 
  34.      +'class="ux-MultiSelect-icon ux-MultiSelect-icon-' 
  35.      +'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">' 
  36.      +'{[values.'+this.displayField+']}' 
  37.      +'</div>' 
  38.      +'</tpl>' 
  39.     ; 
  40.    } 
  41.         // call parent 
  42.         Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments); 
  43.    // install internal event handlers 
  44.    this.on({ 
  45.     scope:this 
  46.     ,beforequery:this.onBeforeQuery 
  47.     ,blur:this.onRealBlur 
  48.    }); 
  49.    // remove selection from input field 
  50.    this.onLoad = this.onLoad.createSequence(function() { 
  51.     if(this.el) { 
  52.      var v = this.el.dom.value; 
  53.      this.el.dom.value = ''; 
  54.      this.el.dom.value = v; 
  55.     } 
  56.    }); 
  57.     } // e/o function initComponent 
  58.     // }}} 
  59. // {{{ 
  60.  
  61. ,initEvents:function() { 
  62.    Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments); 
  63.    // disable default tab handling - does no good 
  64.    this.keyNav.tab = false; 
  65. } // eo function initEvents 
  66. // }}} 
  67. // {{{ 
  68.  
  69. ,clearValue:function() { 
  70.    this.value = ''; 
  71.    this.setRawValue(this.value); 
  72.    this.store.clearFilter(); 
  73.    this.store.each(function(r) { 
  74.     r.set(this.checkField, false); 
  75.    }, this); 
  76.    if(this.hiddenField) { 
  77.     this.hiddenField.value = ''; 
  78.    } 
  79.    this.applyEmptyText(); 
  80. } // eo function clearValue 
  81. // }}} 
  82. // {{{ 
  83.  
  84. ,getCheckedDisplay:function() { 
  85.    var re = new RegExp(this.separator, "g"); 
  86.    return this.getCheckedValue(this.displayField).replace(re, this.separator + ' '); 
  87. } // eo function getCheckedDisplay 
  88. // }}} 
  89. // {{{ 
  90.  
  91. ,getCheckedValue:function(field) { 
  92.    field = field || this.valueField; 
  93.    var c = []; 
  94.    // store may be filtered so get all records 
  95.    var snapshot = this.store.snapshot || this.store.data; 
  96.    snapshot.each(function(r) { 
  97.     if(r.get(this.checkField)) { 
  98.      c.push(r.get(field)); 
  99.     } 
  100.    }, this); 
  101.    return c.join(this.separator); 
  102. } // eo function getCheckedValue 
  103. // }}} 
  104. // {{{ 
  105.  
  106. ,onBeforeQuery:function(qe) { 
  107.    qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), ''); 
  108. } // eo function onBeforeQuery 
  109. // }}} 
  110. // {{{ 
  111.  
  112. ,onRealBlur:function() { 
  113.    this.list.hide(); 
  114.    var rv = this.getRawValue(); 
  115.    var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *')); 
  116.    var va = []; 
  117.    var snapshot = this.store.snapshot || this.store.data; 
  118.    // iterate through raw values and records and check/uncheck items 
  119.    Ext.each(rva, function(v) { 
  120.     snapshot.each(function(r) { 
  121.      if(v === r.get(this.displayField)) { 
  122.       va.push(r.get(this.valueField)); 
  123.      } 
  124.     }, this); 
  125.    }, this); 
  126.    this.setValue(va.join(this.separator)); 
  127.    this.store.clearFilter(); 
  128. } // eo function onRealBlur 
  129. // }}} 
  130. // {{{ 
  131.  
  132. ,onSelect:function(record, index) { 
  133.         if(this.fireEvent('beforeselect', this, record, index) !== false){ 
  134.     // toggle checked field 
  135.     record.set(this.checkField, !record.get(this.checkField)); 
  136.     // display full list 
  137.     if(this.store.isFiltered()) { 
  138.      this.doQuery(this.allQuery); 
  139.     } 
  140.     // set (update) value and fire event 
  141.     this.setValue(this.getCheckedValue()); 
  142.             this.fireEvent('select', this, record, index); 
  143.         } 
  144. } // eo function onSelect 
  145. // }}} 
  146. // {{{ 
  147.  
  148. ,setValue:function(v) { 
  149.    if(v) { 
  150.     v = '' + v; 
  151.     if(this.valueField) { 
  152.      this.store.clearFilter(); 
  153.      this.store.each(function(r) { 
  154.       var checked = !(!v.match( 
  155.        '(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField)) 
  156.        +'(' + this.separator + '|$)')) 
  157.       ; 
  158.       r.set(this.checkField, checked); 
  159.      }, this); 
  160.      this.value = this.getCheckedValue(); 
  161.      this.setRawValue(this.getCheckedDisplay()); 
  162.      if(this.hiddenField) { 
  163.       this.hiddenField.value = this.value; 
  164.      } 
  165.     } 
  166.     else { 
  167.      this.value = v; 
  168.      this.setRawValue(v); 
  169.      if(this.hiddenField) { 
  170.       this.hiddenField.value = v; 
  171.      } 
  172.     } 
  173.     if(this.el) { 
  174.      this.el.removeClass(this.emptyClass); 
  175.     } 
  176.    } 
  177.    else { 
  178.     //this.clearValue(); 
  179.    } 
  180. } // eo function setValue 
  181. // }}} 
  182. // {{{ 
  183.  
  184. ,selectAll:function() { 
  185.         this.store.each(function(record){ 
  186.             // toggle checked field 
  187.             record.set(this.checkField, true); 
  188.         }, this); 
  189.         //display full list 
  190.         this.doQuery(this.allQuery); 
  191.         this.setValue(this.getCheckedValue()); 
  192.     } // eo full selectAll 
  193. // }}} 
  194. // {{{ 
  195.  
  196.     ,deselectAll:function() { 
  197.    this.clearValue(); 
  198.     } // eo full deselectAll 
  199. // }}} 
  200. }); // eo extend 
  201. // register xtype 
  202. Ext.reg('multiSelect', Ext.form.MultiSelect);  
// vim: ts=4:sw=4:nu:fdc=4:nospell
 
// 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.form');

Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox, {
// {{{
    // configuration options

checkField:'checked'

    ,separator:','

// }}}
    // {{{
    ,initComponent:function() {
       
   // template with checkbox
   if(!this.tpl) {
    this.tpl =
     '<tpl for=".">'
     +'<div class="x-combo-list-item">'
     +'<img src="' + Ext.BLANK_IMAGE_URL + '" '
     +'class="ux-MultiSelect-icon ux-MultiSelect-icon-'
     +'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
     +'{[values.'+this.displayField+']}'
     +'</div>'
     +'</tpl>'
    ;
   }
        // call parent
        Ext.form.MultiSelect.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
    // }}}
// {{{

,initEvents:function() {
   Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments);
   // disable default tab handling - does no good
   this.keyNav.tab = false;
} // eo function initEvents
// }}}
// {{{

,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
// }}}
// {{{

,getCheckedDisplay:function() {
   var re = new RegExp(this.separator, "g");
   return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
} // eo function getCheckedDisplay
// }}}
// {{{

,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) {
    if(r.get(this.checkField)) {
     c.push(r.get(field));
    }
   }, this);
   return c.join(this.separator);
} // eo function getCheckedValue
// }}}
// {{{

,onBeforeQuery:function(qe) {
   qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');
} // eo function onBeforeQuery
// }}}
// {{{

,onRealBlur:function() {
   this.list.hide();
   var rv = this.getRawValue();
   var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
   var va = [];
   var snapshot = this.store.snapshot || this.store.data;
   // iterate through raw values and records and check/uncheck items
   Ext.each(rva, function(v) {
    snapshot.each(function(r) {
     if(v === r.get(this.displayField)) {
      va.push(r.get(this.valueField));
     }
    }, this);
   }, this);
   this.setValue(va.join(this.separator));
   this.store.clearFilter();
} // eo function onRealBlur
// }}}
// {{{

,onSelect:function(record, index) {
        if(this.fireEvent('beforeselect', this, record, index) !== false){
    // toggle checked field
    record.set(this.checkField, !record.get(this.checkField));
    // display full list
    if(this.store.isFiltered()) {
     this.doQuery(this.allQuery);
    }
    // set (update) value and fire event
    this.setValue(this.getCheckedValue());
            this.fireEvent('select', this, record, index);
        }
} // eo function onSelect
// }}}
// {{{

,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();
     this.setRawValue(this.getCheckedDisplay());
     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);
    }
   }
   else {
    //this.clearValue();
   }
} // eo function setValue
// }}}
// {{{

,selectAll:function() {
        this.store.each(function(record){
            // toggle checked field
            record.set(this.checkField, true);
        }, this);
        //display full list
        this.doQuery(this.allQuery);
        this.setValue(this.getCheckedValue());
    } // eo full selectAll
// }}}
// {{{

    ,deselectAll:function() {
   this.clearValue();
    } // eo full deselectAll
// }}}
}); // eo extend
// register xtype
Ext.reg('multiSelect', Ext.form.MultiSelect);
二. 下面就在你项目的js文件中调用上面 扩展的组建

[javascript] view plain copy print ?
  1. //任务状态JsonStore 
  2. var taskstatusStore = new Ext.data.JsonStore({ 
  3.    id:'optvalue', 
  4.         remoteSort: false, 
  5.         fields: [ 
  6.          'optvalue', 
  7.          'opttext' 
  8.   ], 
  9.         proxy: new Ext.data.HttpProxy({ 
  10.             url: 'operation/task/querytaskstatuslist.jsp' 
  11.         }) 
  12.     }); 
  13. //给下拉框设置默认值 
  14. taskstatusStore.load(); 
  15.     taskstatusStore.on('load',function(){ 
  16.      taskstatuscombo.setValue(3); 
  17. }); 
  18. var taskstatuscombo = new Ext.form.MultiSelect({ 
  19.   width:130, 
  20.   editable: false, 
  21.   store:taskstatusStore , 
  22.   valueField :"optvalue", 
  23.   displayField: "opttext", 
  24.   mode: 'local', 
  25.   //forceSelection: true,一定不要声明此句 
  26.   triggerAction: 'all', 
  27.   allowBlank:false, 
  28.   emptyText:'请选择' 
  29. });  
//任务状态JsonStore
var taskstatusStore = new Ext.data.JsonStore({
   id:'optvalue',
        remoteSort: false,
        fields: [
         'optvalue',
         'opttext'
  ],
        proxy: new Ext.data.HttpProxy({
            url: 'operation/task/querytaskstatuslist.jsp'
        })
    });
//给下拉框设置默认值
taskstatusStore.load();
    taskstatusStore.on('load',function(){
     taskstatuscombo.setValue(3);
});
var taskstatuscombo = new Ext.form.MultiSelect({
  width:130,
  editable: false,
  store:taskstatusStore ,
  valueField :"optvalue",
  displayField: "opttext",
  mode: 'local',
  //forceSelection: true,一定不要声明此句
  triggerAction: 'all',
  allowBlank:false,
  emptyText:'请选择'
});

三. 可以多选了，但是，出现了个问题，下拉的 checkbox 没有显示，客户说可以，时间仓促，研究出原因后，再来补齐文档，呵呵。。。
run_in_IT
关注
extjs多选下拉框
02-23
extjs多选下拉框，支持单选，多选，全选和全不选，ext3.*适用，文章的例子下载。
Extjs4 下拉多选（Multiple Selection）
03-07
在Extjs4中，下拉多选得以支持，只需要设置Combobox的multiSelect值为true就可以了。但是有一些问题，就是下拉框选值、去除值友好性不高，必须点击下拉框中同样的项，才能选取或去除。 在官网论坛中，发现了一个插件，这个插件是扩展了Combobox多选功能，使得下拉多选更美观、好用。 更多Extjs4信息，请移步 http://www.mhzg.net
Extjs下拉多选框
weixin_33738555的博客
10-31 185
//------录入时间,下拉列表框------ var inputTimeRow = new Ext.data.Record.create([ { name : 'value' },{ name : 'text' } ]); ...
Extjs之多选下拉框（MultiSelect）
qq_44935748的博客
04-19 1280
Extjs之多选下拉框（MultiSelect）
extjs多选 下拉框扩展
12-05
总结起来，"extjs多选 下拉框扩展"是为了满足ExtJS应用中多选功能的需求，通过对原生ComboBox组件进行扩展和定制，实现了带有复选框的多选下拉框。这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、...
EXTJS多选下拉框
05-02
在EXTJS中，多选下拉框（Lovcombo）是一种常见的组件，它结合了选择列表和输入框的功能，允许用户从预定义的选项中选择多个条目。这个lovcombo是lov（List-Value）和combo（组合框）的结合体，提供了丰富的交互性和...
EXTJS多选下拉框实现与示例代码解析
以下是一个简单的ExtJS多选下拉框的实现示例。此示例包含了HTML页面、JavaScript脚本和CSS样式文件。请确保按照给出的文件名称列表创建相应的文件，并将以下代码片段填充到对应的文件中。 ### HTML文件（lovcombo....
简单的EXTJS多选下拉框
chinawomen的专栏
07-06 573
看了下网上的下拉框多选扩展示例都太复杂了。本来很简单的东西却搞的那么复杂。 贴贴我的代码 很简单 var store = new Ext.data.SimpleStore({ fields: ['abbr', 'state', 'nick'], data : Ext.exampledata.states // from states.js }...
Extjs 实现下拉框多选
Sucker的小笔记
11-14 3097
{     fieldLabel:'多选下拉框',     triggerAction:'all',     id:'multiselect',     name:'multiselect',     xtype: 'combo',     width:100,     emptyText:'请选择',     store:manStore,     mode:'local',     value...
extjs实现下拉框多选
03-18
extjs实现下拉框多选，很实用哦！
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选
08-30
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选， 附源码。 修复不能多选问题，代码仅供参考
Extjs下拉多选树
07-22
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
ExtJS 下拉多选框lovcombo
12-08
开始以为很简单，在option里加个input checkbox就行了。哪知行不通，网上搜了一些实现方法，主要是用div层来模拟下拉。本想照着这种思路，再结合这个项目具体应用自己写一个，发现太麻烦了。刚好在另外一个项目中使用extjs，找到了一个扩展lovcombo，学习了一下它自带的例子（配合2.3版的extjs，3.x版的貌似有问题）。例子倒不难，关键是要把它添加到现有的代码中，并且尽量少的改动原有代码。 下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事件的处理。extjs本身的那种数据和UI分离的模式使得级联的实现非常轻松。只需在省份下拉框的sele
EXT3.2 多选下拉框
04-06
extjs3.2 多选下拉框 复选下拉框
Extjs 下拉框多选
kfcman的专栏
11-16 323
1、效果图：  2、扩展js类库，在项目中建立一个 js文件，命名为：MultiSelect.js  其代码为： if ('function' !== typeof RegExp.escape) {    RegExp.escape = function (s) {        if ('string' !== typeof s) {            return s;    ...
extjs获取多选框_Extjs下拉多选框
weixin_35965587的博客
12-24 350
//------录入时间,下拉列表框------var inputTimeRow = newExt.data.Record.create([{name :'value'},{name :'text'}]);var inputTimeReader = newExt.data.JsonReader({fields : inputTimeRow});var inputTimeProxy = newExt...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值