- 浏览: 407966 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (318)
- js (20)
- JQuery (2)
- Java (46)
- Oracle (4)
- mysql (21)
- ExtJs (17)
- Excel (2)
- Linux (8)
- Sql (8)
- Jsp (2)
- hibernate (12)
- jbpm (17)
- eclipse (8)
- 名博收藏 (1)
- Junit (2)
- 应用集成 (3)
- web (10)
- jboss (3)
- Rest (3)
- 其它 (7)
- 磁盘分区管理 (1)
- spring (18)
- SSO (4)
- tomcat (4)
- CSS (7)
- MemCached (6)
- EhCache (4)
- weblogic (1)
- apache (6)
- Exception design (1)
- db (1)
- 分析模式 (1)
- jstl (1)
- jsf (0)
- firefox (2)
- MongoDB (4)
- androidpn (1)
- hadoop (1)
- cvs (1)
- 微信公众号 (2)
- 高并发 (4)
- 技术论坛 (1)
- CDN (1)
- JVM (16)
- 加密 (4)
- maven (2)
- jenkins (1)
- hessian (1)
- 大数据处理 (2)
- NIO (0)
- netty (1)
- redis (1)
- git (1)
- Elastic Job (0)
最新评论
-
zgw06629:
或者<pre>aaaabbbbcccc</p ...
javaDoc注释换行 -
ddnzero:
...
StringBuffer换行 -
maosijun:
。。。。
EXT CExt.form.ComboBox选择一次后只剩一个选项 -
ysa198584:
你这有问题,当我的代码出现User.class的时候,反编绎的 ...
java的class文件批量反编译 -
dongj0325:
看到您的博客,很受启发,但还有关于jbpm4.4 timer使 ...
JBPM定时器(Timer)之Repeat属性不能使用变量
最近学习使用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#
发表评论
-
Extjs组件的生命周期
2012-04-13 14:41 1297今天闲着没事,打算要 ... -
Ext源码分析:解析Ext的命名空间,Ext.namespace
2012-04-11 17:07 965初学者一定对Ext大量的命名空间感到不解,其实是非常简单的东西 ... -
Ext js Ajax异步请求超时统一全局设置
2012-02-16 20:18 1881Ext js AJAX异步请求超时统一全局设置: 修 ... -
Ext grid 文本位置设置方式
2011-07-28 16:37 1266我所知道Ext grid 文本位置设置方式主要有两种: (1 ... -
Panel上放两个ToolBar两行显示
2011-07-06 10:30 2770一个panel只能有一个tbar,有时我们tbar上的内容很多 ... -
ExtJS 3.0 优秀扩展简介 (持续更新)
2011-07-06 10:27 717http://www.iteye.com/topic/4473 ... -
EXT的combo没那个下拉的箭头
2011-07-05 15:56 791EXT的combo没那个下拉的箭头的原因可能是 设置了rea ... -
Ext grid 隐藏纵向滚动条 Ext Grid 最后一列怎么隐藏?就是滚动条会出现的那列
2011-06-18 16:28 2181配置前: 配置: autoHeight : true, ... -
设置Ext Grid 表头及背面背景色
2011-06-15 14:42 4020设置Ext Grid 表头及背面背景色 moneFundsD ... -
Ext Grid高度
2011-06-15 12:48 888设置Ext Grid的样式为: style : { ... -
ExtJs 学习笔记 Ext.DomHelper 学习 收藏
2011-06-15 08:08 1034类说明: DomHelper 这个类对普通的DOM 或者HTM ... -
设置ext grid字体样式
2011-06-13 17:26 2076改变Ext Grid字体样式: (1)声明Cloumn渲染器 ... -
EXT CExt.form.ComboBox选择一次后只剩一个选项
2011-05-30 15:26 1512EXT CExt.form.ComboBox选择一次后只剩一个 ... -
仔仔细细分析Ext》 第一章 必须理解Ext.extend函数
2011-05-07 17:38 1069强烈声明:转自:http://hi.baidu.com/ihc ... -
Ext.form.TextField 的隐藏
2009-12-15 20:48 1589终于会隐藏Ext.form.TextField 了 ... -
动态改变JsonStore的Url
2009-12-14 20:34 2361费了不少周折终于能动态改变JsonStore的Url了! ...
相关推荐
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
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部分会有问题。
可以进行多选的带checkbox的combobox,大家运行一下就知道了。 本次修正了在combox的displayfield和valuefield不一致时会产生的错误
Extjs4实现的Ext.ux.form.TinyMCETextArea html580 inyMCETextArea
这个文件是重写ext的ColorPickerFieldPlus控件,实现自定义调色,和ps取颜色一样,比Ext自带的颜色多很多,是自己可以调的
NULL 博文链接:https://shuixian.iteye.com/blog/1329333
好东西拿出来大家分享,可以用做多文件上传的组建
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....
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 MonthPicker 月份选择控件,在页面插入js, 在需要的面板或者form面板插入即可 var item ={ xtype: 'monthfield', width: 150, fieldLabel: '月份', labelAlign: 'right', labelSeparator: ' ', ...
11.18 Ext.ux.Portal ............................... 309 11.19 Ext.Desktop .................................... 312 11.20 本章小结.............................................. 316 第12 章 一个完整的...
Ext.ux.DateTimeField控件已在Sencha论坛上浮动。 有一些补丁程序使其可用于5.1。 参见此处: : 什么有效 我得到了最新版本,将类重命名为更类似于当前的Ext 5.1架构,并修复了尝试选择时间控件时的错误。 过时的...
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
Ext.ux.form.field.Currency 具有货币符号的Ext JS 4.x,5.x,6.x货币字段,国际支持的千位分隔符 在线演示 如果您发现并修复了任何错误或想要添加更多功能,请随时进行派生并提出拉取请求。 感谢Greivin Britton
调用代码:Ext.create('erp.ux.form.field.DateTimer', { name: 'userBirth'//接收和传递到后台的name }) 注意事项:1、只有日期、年、月、日全部选择后,才能从name中获取值,日期格式:YYYY-MM-dd HH:mm:ss。如果...
7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 ...
this.cboTheme = new Ext.form.ComboBox({ id: 'ux-startcombo-theme', store: themestore, valueField: 'File', displayField: 'Name', mode: 'local', typeAhead: true, editable: false, triggerAction:...
1.先按顺序导入 [removed][removed] [removed][removed] [removed][removed] [removed][removed] ... var startTime = Ext.create('Ext.ux.form.DateTimeField',{ filedLabel:'开始时间', name:'startTime' });
7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 ...
对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。