`

Ext之扩展Ext.ux.form.LovCombo使用

阅读更多

    最近学习使用Ext做些东西,有时候找到现成的,但却不知道如何使用。比如前几天在项目中有个多选下拉框的要求。由于Ext本身并没有这样的控件,经过在网上搜索,找到一个扩展了Ext.form.ComboBox的控件Ext.ux.form.LovCombo 其可以满足多选。虽然找到了,但不知道怎么用,经过一天多的努力,终于会用了。首先看看其源码。

 

Ext.ux.form.LovCombo源码如下

// 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

 

  CSS代码如下:

/** 
 *
 * Ext.ux.form.LovCombo CSS File
 *
 * @author    Ing.Jozef 
 * @copyright (c) 2008.
 * @date      5. April 2008
 * @version   $Id: lovCombo.css,v 1.1.2.1 2009/11/30 02:12:32 xiaozhangqi Exp $
 *
 * @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-plug/resources/images/default/menu/checked.gif);
}
.ux-lovcombo-icon-unchecked {
	background: transparent url(../ext-plug/resources/images/default/menu/unchecked.gif);
}
 
/* eof */

 

 

下面介绍如何使用Ext.ux.form.LovCombo(在这里介绍的是基于JSP,服务器端使用Java)

 

      首先,当然时在你的JSP中引入Ext.ux.form.LovCombo源代码和其CSS文件了,如:

 <script type="text/javascript" src="<c:url value="/wrapper/LovCombo.js"/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/lovCombo.css"/>"/>

     

     然后,当然是在你的JS中创建一个Ext.ux.form.LovCombo了,在我的代码中的使用方式是在一个JS类中创建一个方 法来专门得到一个Ext.ux.form.LovCombo得实例,当然对于其它控件的获取你也可以这样,其中方法如下:

	this.getMultiSelectComboBox = function(title, url, width, name, editable,
			blank, handler) {
				
		title2 = stringFilter['filterBlank'](blank, title);
		var store = new Ext.data.JsonStore({
					url : url,
					fields : ['label', 'value', 'selected']
				});
		store.load();
		Ext.namespace("Ext.ux.form");
		store.on('load', function(ds, records, o) {
			 var isFirst = true;
             var selectedItems = "";
			for (i = 0; i < records.length; i++) {
				if (records[i].data.selected == 'y') {
					if(isFirst){
					selectedItems = selectedItems+records[i].data.value;
					isFirst =false;
					}else{
						selectedItems=selectedItems+","+records[i].data.value;
					}
				}
			}
			multiSelectComboBox.setValue(selectedItems);
		});
		var multiSelectComboBox = new Ext.ux.form.LovCombo({
					//id : 'lovcombo',
					name : name,
					hiddenName : name,
					fieldLabel : title2,
					width : width,
					listWidth : width,
					hideOnSelect : false,
					maxHeight : 200,
					readOnly : true,
					editable : false,
					store : store,
					displayField : 'label',
					valueField : 'value',
					typeAhead : true,
					allowBlank : blank,
					triggerAction : 'all',
					emptyText : "-=请选择=-",
					mode : 'local'
				});
		return multiSelectComboBox;
	};

          上面代码的URL就是Ajax访问的URL,如“flowInfoConfigAction.do?method=getRoles”(我使用的服务器端 是Struts),

 

  再次是服务器传回的数据格式如下:

[{"value":"1","label":"rootDepart"},{"selected":"y","value":"2","label":"Depart_1"},{"selected":"y","value":"3","label":"Depart_2"}]

   至于如何根据你的实体得到这样的Json数据,这里就不用多说了!

 

   最后的使用效果如下图:

  

 

 特别注意:这个组件,在失去焦点后会出现选中的值被清空,要处理这个问题有以下两种方法:

// 第一种方法 override beforeBlur method
   Ext.override(Ext.ux.form.LovCombo, {   
       beforeBlur: Ext.emptyFn   
   }); 
			 
 /*****************************************/
lovCombo = new Ext.ux.form.LovCombo({
    fieldLabel : '多选框',
    id : 'test',
    name : 'test',
    store : fromStore,
    mode : 'local',
    readOnly : true,
    triggerAction : 'all',
    allowBlank : true,
    valueField : "id",
    displayField : "name",
    anchor : '90%',
    beforeBlur : function() {// 第二种方法直接配在定义处. override beforeBlur method}
});

    这种解决办法来自http://blog.csdn.net/avajworm/article/details/6304684#

 

  • 大小: 28.7 KB
分享到:
评论

相关推荐

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    Ext.ux.form.ColorPickerFieldPlus 老外重写调色版

    `Ext.ux.form.ColorPickerFieldPlus` 是一个由老外开发者重写的色彩选择器组件,它扩展了原生的Ext JS库中的`ColorPickerField`控件,为用户提供更加丰富的色彩选取体验。这个组件的目的是为了实现更自由、更接近...

    extjs4.1-ux.rar

    Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel...12、Ext.ux.form.field.TinyMCE 13、Ext.ux.form.field.Grid 主页:https://github.com/harrydeluxe/extjs-ux 注明:在Extjs4.1上是可以使用的,Extjs4.2部分会有问题。

    EXT控件lovcombo

    EXT控件是Sencha EXT JS框架中的一种组件,它提供了丰富的用户界面元素,用于构建复杂的Web应用程序。...对于使用EXT JS开发Web应用的程序员来说,理解并掌握lovcombo的用法和相关修正具有很高的实用价值。

    Ext.ux.form.TinyMCETextArea

    而`Ext.ux.form.TinyMCETextArea`则扩展了这个基础组件,提供了更丰富的编辑功能。这个组件通常用在需要用户输入格式化文本的表单中,比如发布博客、编写文章或编辑产品描述等。 使用`Ext.ux.form.TinyMCETextArea`...

    lovcombo-1.0.zip lovcombo-1.0.zip

    2. **Ext.ux.form.LovCombo Extension by Saki.htm**:此文件可能详细介绍了Saki开发的名为LovCombo的扩展,它可能是基于Ext JS框架的一个用户界面组件。"ux"通常表示"用户体验",是Ext JS中用于非核心功能的扩展...

    解决ext下拉列表全选和去全选功能

    var comboBox = Ext.create('Ext.form.field.ComboBox', { multiSelect: true, store: myStore, // 这里是你的数据存储 displayField: 'name', valueField: 'id' }); ``` 为了实现全选和去全选的功能,我们可以...

    Ext.ux.form.field.DateTime:ExtJS DateTime字段

    Ext.ux.DateTimeField控件已在Sencha论坛上浮动。 有一些补丁程序使其可用于5.1。 参见此处: : 什么有效 我得到了最新版本,将类重命名为更类似于当前的Ext 5.1架构,并修复了尝试选择时间控件时的错误。 过时的...

    Ext.ux.form.UploadPanel.js

    好东西拿出来大家分享,可以用做多文件上传的组建

    Ext Js权威指南(.zip.001

    7.2.10 使用浏览器存储的代理:ext.data.webstorageproxy、ext.data. sessionstorageproxy和ext.data.proxy.localstorage / 314 7.3 读取和格式化数据 / 315 7.3.1 概述 / 315 7.3.2 数据的转换过程:ext.data....

    如何在服务器端 读取Ext.ux.UploadDialog上传的文件?

    Ext.ux.UploadDialog 是一个 ExtJS 框架的扩展组件,它提供了一个友好的用户界面来处理文件上传。在服务器端,我们需要正确解析接收到的请求,以便能够读取并处理上传的文件。在 Java 环境下,Apache Commons ...

    mzExt:Extjs 4.x的插件和扩展

    Extjs 4.x的插件和扩展Ext.ux.form.field.CodeMirror 可与ExtJS 4.0.7、4.1.x和4.2.x以及CodeMirror 3.20一起使用。 执照:麻省理工学院演示:论坛:Ext.ux.form.field.UploadFileField 执照:麻省理工学院演示:...

    Ext下拉树、下拉表格

    4. 将树转换为下拉菜单:使用Ext.form.field.ComboBox,配置其store为树数据模型,并设置displayField为显示的字段,valueField为选择项的标识字段。 下拉表格(ComboBox with Grid): 下拉表格组件则是下拉菜单...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    var iframe = Ext.create('Ext.ux.IFrame', { src: 'http://example.com', listeners: { load: function() { var iframeBody = this.getDoc().body; var iframeHeight = iframeBody.offsetHeight + 'px'; ...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...

    Ext.ux.MonthPicker.js

    EXT MonthPicker 月份选择控件,在页面插入js, 在需要的面板或者form面板插入即可 var item ={ xtype: 'monthfield', width: 150, fieldLabel: '月份', labelAlign: 'right', labelSeparator: ' ', ...

    Ext6.7在线文档(离线版)

    Ext6.7离线文档,不用再翻墙查看,本地数据查看迅速

    可编辑表格Ext.grid.EditorGridPanel

    {header: 'Name', width: 200, dataIndex: 'name', editor: new Ext.form.TextField()}, {header: 'Age', width: 100, dataIndex: 'age', editor: new Ext.form.NumberField()} ]); // 创建EditorGridPanel var ...

    Ext深入浅出 数据传输

    11.18 Ext.ux.Portal ............................... 309 11.19 Ext.Desktop .................................... 312 11.20 本章小结.............................................. 316 第12 章 一个完整的...

    UploadDialog3_x 下载

    在实际项目中,`UploadDialog3_x`组件的使用需要配合Ext的其他组件和API,例如,可能需要结合`GridPanel`来展示已上传的文件列表,或者使用`Form`来收集与上传文件相关的元数据。同时,为了保证其正常工作,开发者还...

Global site tag (gtag.js) - Google Analytics