- 浏览: 537309 次
- 性别:
- 来自: 中华大丈夫学院
文章分类
最新评论
-
lxmin0702:
你好,我刚下载了您的附件,但是发现里面并没有正文所提到的Lis ...
SWT中ole/activex实践--操作word的一个例子 -
kkkwoai:
我想请教下 我有个要求是实现ppt解析为图片,用的是jac ...
Office 开发: 现实生活中的 OBA 解决方案模式 -
pengshan:
However, the mutability of the ...
【翻译】Spring Integration参考手册-第二章 -
kms1989:
导出pdf中文乱码怎么搞?
jsPDF介绍与兼容IE的补丁 -
kms1989:
你好,请问不支持中文怎么解决?
jsPDF介绍与兼容IE的补丁
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'});
也能顺利绑定.为什么呢?真是想不通
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
挺好用 不过你介绍什么了啊 给个链接就得了
发表评论
-
excelpanel之二-实现简单数据库表的展示与回填
2010-08-26 00:40 3285最近应一个朋友的的要 ... -
excelpanel--extjs中嵌入excel,并封装简单操作
2010-01-08 16:01 5216ExcelPanel Kimmking kimmking@ ... -
Ext.grid.EditorGridPanel的一个小问题
2009-12-10 23:05 2941当一个页面有多个结构 ... -
偶的ExtJS讲座之基础教程PDF版~
2009-02-28 12:48 3032偶的ExtJS讲座之基础教程PDF版~ KimmKing 20 ... -
Ext扩展组件介绍之一--Ext.Drawing.Surface绘图组件(vml/svg)
2009-02-27 00:53 4678Ext扩展组件介绍之一--Ext.Drawing.Surf ... -
什么样的Element可以mask?
2008-08-02 03:18 2055mask的效果就是指 在现有的UI组件上蒙上一层(一般是半透明 ... -
下拉多选的树(Ext.ux.ComboBoxCheckTree)
2008-08-02 01:06 5032略微的整合了xiexueze 同学的 多选树Ext.tree ... -
Ext中使用Word
2008-07-27 20:06 3931Ext中使用Word -
GridPanel to real Excel file(IE5+,Windows,Office)
2008-07-25 03:29 12048GridPanel to real Excel file(On ... -
解决Ext对于复杂项目加载慢的一个思路
2008-07-23 21:21 5128本人新手,以下仅仅是个人观点: OPOJ方式下使用Ext,由 ...
相关推荐
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
Extjs3 多选下拉框LovCombo,Extjs3 多选下拉框LovCombo
支持ext3.0以上版本,希望大家能用到-----------------------------------
下拉框选择背景.rar下拉框选择背景.rar下拉框选择背景.rar下拉框选择背景.rar下拉框选择背景.rar下拉框选择背景.rar
js多选下拉框多选下拉框多选下拉框js多选下拉框多选下拉框多选下拉框
layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
基于layui框架的前端多选下拉框组件,项目中直接导入,复制demo源码就能使用,开发方便,样式美观
layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
html多选下拉框 ,CheckBox的Select组件。可多选的下拉框。
jquery实现的多选下拉框ehynds-jquery-ui-multiselect-widget-1.10-3.zip
extjs3.2 多选下拉框 复选下拉框
下拉框选择显示图片.rar下拉框选择显示图片.rar下拉框选择显示图片.rar下拉框选择显示图片.rar下拉框选择显示图片.rar下拉框选择显示图片.rar
下拉框显示当前时间.rar下拉框显示当前时间.rar下拉框显示当前时间.rar下拉框显示当前时间.rar下拉框显示当前时间.rar下拉框显示当前时间.rar
JS多选下拉框,实现多选。点击显示下拉。 <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status').innerHTML = $('status').innerHTML=...
自定义的WinForm窗体的下拉框中可以多选
支持下拉框多选、全选
图片转换效果.rar图片转换效果.rar图片转换效果.rar图片转换效果.rar图片转换效果.rar图片转换效果.rar
前端select下拉框带搜索,多选,反选
NULL 博文链接:https://dengli19881102.iteye.com/blog/904770
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。