Ext扩展组件介绍之二--Ext.ux.form.LovCombo多选下拉框

  

Ext扩展组件介绍之二--Ext.ux.form.LovCombo多选下拉框

 

KimmKing

2009年3月1日4:46:52 

前天发了一个绘图组件Ext.Drawing.Surface绘图组件(vml/svg)，结果无人响应，今天就找个我常用的ux组件给大家分享。 

 

鉴于2楼说没介绍什么，我就简单介绍下吧~

Ext.ux.form.LovCombo继承自Ext.form.ComboBox，重写了其下拉列表的模板，添加了复选框。

修改了取值和赋值，将用户选中的各个项的值用逗号串成字符串。

将用户传入的字符串按逗号分割成各个值，再在组件渲染时，选中其前面的多选框。

其他用法和ComboBox一致。

 

--

找到了链接了，累死我了~~
http://lovcombo.extjs.eu/

  

Ext.ux.form.LovCombo.js

// 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} 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-lovcombo-icon ux-lovcombo-icon-'
				+'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
				+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'
				+'</div>'
				+'</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(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(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 LovCombo
	 * @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('lovcombo', Ext.ux.form.LovCombo); 
 
// eof

 

 

test：

 

 

// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
 * Ext.ux.form.RowActions Plugin Example Application
 *
 * @author    Ing. Jozef Sakáloš
 * @date      22. March 2008
 * @version   $Id: lovcombo.js 78 2008-06-06 09:22:10Z jozo $
 *
 * @license 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
 */


	var lc = new Ext.ux.form.LovCombo({
		 id:'lovcombo'
		,renderTo:'lovcomboct'
		,width:300
		,hideOnSelect:false
		,maxHeight:200
		,readOnly:true
		,editable:false
		,store:[
			 [1, 'Personnel []']
			,[11, 'Finance (33)']
			,[5, 'Door']
			,[6, 'Door Panel']
			,[2, 'Management !77']
			,[25, 'Production']
			,[3, 'Users']
			,[20, 'Window']
			,[21, 'Window Panel']
			,[22, 'Form Panel']
			,[23, 'Grid Panel']
			,[24, 'Data View Panel']
		]
//		,store:new Ext.data.SimpleStore({
//			 id:0
//			,fields:[{name:'id',type:'int'}, 'privGroup']
//			,data:[
//				 [1, 'Personnel']
//				,[11, 'Finance']
//				,[2, 'Management']
//				,[22, 'Production']
//				,[3, 'Users']
//			]
//		})
		,triggerAction:'all'
//		,valueField:'id'
//		,displayField:'privGroup'
		,mode:'local'
	});

	var tf = new Ext.form.TextField({
		 renderTo:'textct'
		,id:'tf'
		,width:300
		,selectOnFocus:false
		,listeners:{
			focus:function() {this.setValue(lc.getValue());}
		}
	});

css

/** vim: ts=4:sw=4:nu:fdc=4:nospell
 *
 * Ext.ux.form.LovCombo CSS File
 *
 * @author    Ing.Jozef Sak谩lo拧
 * @copyright (c) 2008, by Ing. Jozef Sak谩lo拧
 * @date      5. April 2008
 * @version   $Id: Ext.ux.form.LovCombo.css 189 2008-04-16 21:01:06Z jozo $
 *
 * @license Ext.ux.form.LovCombo.css 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
 */

.ux-lovcombo-icon {
	width:16px;
	height:16px;
	float:left;
	background-position: -1px -1px ! important;
	background-repeat:no-repeat ! important;
}
.ux-lovcombo-icon-checked {
	background: transparent url(../ext/resources/images/default/menu/checked.gif);
}
.ux-lovcombo-icon-unchecked {
	background: transparent url(../ext/resources/images/default/menu/unchecked.gif);
}
 
/* eof */

 

评论

8 楼 freedom616 2012-05-04  

byp 写道

用的EXT是什么版本的,ext3.4显示不对,显示的是textfield,不是combofield

test.js 24行 readOnly:true  改成  selectOnFocus:true

7 楼 byp 2012-05-02  

用的EXT是什么版本的,ext3.4显示不对,显示的是textfield,不是combofield

6 楼 fengbingji 2009-05-27  

form.getForm().load({
url : '/Service/Ajax/JsonData.aspx?act=getSingleNews',
params:{id:id}
})

JsonReader为:
{successProperty : 'success',root: 'data'
}, [
{name: 'id',type:'int'},
{name: 'title',type:'string'},
{name: 'state',type:'int'},
{name: 'content',type:'string'}
]

其中state就是要绑定的组件,

当"/Service/Ajax/JsonData.aspx?act=getSingleNews"返回的数据为:
{success:true,data:[{id:90,title:'this is a title',state:1,content:'this is a test'}]}
可以顺利通过绑定.

当返回的数据为{success:true,data:[{id:90,title:'this is a title',state:[1,2],content:'this is a test'}]}
则无法绑定(value为数组).

这是为什么呢?
而我通过
form.getForm().setValues({id:90,title:'this is a title',state:[1,2],content:'this is a test'});
也能顺利绑定.为什么呢?真是想不通

5 楼 kimmking 2009-04-29  

kimmking 写道

soaring 写道

这个东东是不错，不过有个BUG：如果下拉列表中有名字重复的选项，你在列表中选中一个的时候，它把所有的都选中了，之前用的是这样，不知最新版本的改了没有

确实有bug，我看看能改不~~

修改了，我还是新起一个帖吧~

4 楼 kimmking 2009-04-29  

soaring 写道

这个东东是不错，不过有个BUG：如果下拉列表中有名字重复的选项，你在列表中选中一个的时候，它把所有的都选中了，之前用的是这样，不知最新版本的改了没有

确实有bug，我看看能改不~~

3 楼 soaring 2009-04-29  

这个东东是不错，不过有个BUG：如果下拉列表中有名字重复的选项，你在列表中选中一个的时候，它把所有的都选中了，之前用的是这样，不知最新版本的改了没有

2 楼 kimmking 2009-03-04  

xiaoyuerbaby 写道

挺好用 不过你介绍什么了啊 给个链接就得了

半年前存的东西，项目里用了，
原始链接找不到了~~
不然就帖出来了~

1 楼 xiaoyuerbaby 2009-03-04  

挺好用 不过你介绍什么了啊 给个链接就得了