网上下载的一个多选下拉框js,其他都能正常使用,但是我在进行一条记录修改时,页面上能显示下拉框的值,但是点击下拉框发现选项不是选中状态。[img]C:\Documents and Settings\Administrator\桌面\QQ图片20140424113645.jpg[/img]
多选下拉框代码如下:
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.form.MultiSelect, List of Values Combo
*
* @author Ing. Jozef Sakáloš
* @copyright (c) 2008, by Ing. Jozef Sakáloš
* @date 16. April 2008
* @version $Id: Ext.form.MultiSelect.js 291 2008-07-03 07:46:49Z jozo $
*
* @license Ext.form.MultiSelect.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.form');
/**
*
* @class Ext.form.MultiSelect
* @extends Ext.form.ComboBox
*/
Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox, {
// {{{
// configuration options
/**
* @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
*/
,separator:','
/**
* @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=".">'
+'<div class="x-combo-list-item">'
+'<img src="' + Ext.BLANK_IMAGE_URL + '" '
+'class="ux-MultiSelect-icon ux-MultiSelect-icon-'
+'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
+'<div class="ux-MultiSelect-item-text">{' + (this.displayField || 'text' )+ '}</div>'
+'</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
// }}}
// {{{
/**
* Disables default tab key bahavior
* @private
*/
,initEvents:function() {
Ext.form.MultiSelect.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(this.separator, "g");
return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
} // 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) {
if(r.get(this.checkField)) {
c.push(r.get(field));
}
}, this);
return c.join(this.separator);
} // eo function getCheckedValue
// }}}
// {{{
/**
* beforequery event handler - handles multiple selections
* @param {Object} qe query event
* @private
*/
,onBeforeQuery:function(qe) {
qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');
} // eo function onBeforeQuery
// }}}
// {{{
/**
* blur event handler - runs only when real blur event is fired
*/
,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
// }}}
// {{{
/**
* Combo's onSelect override
* @private
* @param {Ext.data.Record} record record that has been selected in the list
* @param {Number} index index of selected (clicked) record
*/
,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
// }}}
// {{{
/**
* Sets the value of the MultiSelect
* @param {Mixed} v value
*/
,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
// }}}
// {{{
/**
* Selects all items
*/
,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
// }}}
// {{{
/**
* Deselects all items. Synonym for clearValue
*/
,deselectAll:function() {
this.clearValue();
} // eo full deselectAll
// }}}
}); // eo extend
// register xtype
Ext.reg('multiSelect', Ext.form.MultiSelect);
相关推荐
extjs多选 下拉框扩展
Extjs3 多选下拉框LovCombo,Extjs3 多选下拉框LovCombo
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选 本网站需要12积分下在的,现在共享都给大家
extjs多选下拉框,支持单选,多选,全选和全不选,ext3.*适用,文章的例子下载。
网上下载的多选下拉框,类型为lovcombo。 只要把css和js放到你指定的位置,再更改js中调用css时的地址。 然后就可以在页面像使用其他组件一样使用了。
extjs3.2 多选下拉框 复选下拉框
EXTJS 选下拉框,并取得下拉框的值,直接可以打开
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
extjs实现下拉框多选,很实用哦!
NULL 博文链接:https://lyndon-lin.iteye.com/blog/833120
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
Extjs 4.1 下拉框 Tree 的实现(mvc)
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
extjs 中的下拉框如何动态绑定。如何与后端.net 结合动态绑定下拉框的数据
ExtJs grid多选时获取选中的所有值,以及其他相关的操作