一 Extjs中的插件ItemSelector,使用中的注意事项
使用中需要引用3个文件,MultiSelect.js ,ItemSelector.js,MultiSelect.css
二、参考官方示例程序,中文表现为乱码,需要将以上文件,另存为utf-8格式
三、官方示例程序程序中,如果不做修改,只能获取displayText
四、如果采用json从后台获取,不能自定义displayField和valueField属性,否则在接受框没有选择的值出现.
因笔者通过SQL语句以value text方式,发现数据库不允许这样操作,提示为系统保留字符存在,例如以下语句:
select sId as value,Stext as text from xxx
为此,对该插件,笔者修改一下几个地方,可以完善:
1:修改MultiSelect.js插件,将使用value 和text位置,变更为_value _text,主要是以下位置
2: 为获取选择框的value值,需要修改ItemSelector的setValue()函数,笔者代码参考以下网址:
http://abgne.tw/ext-js/ext-js-tips/itemselector-setvalue-item.html
3:具体使用方法举例如下:(这里直接是应用官方示例程序,没有使用json从后台获取数据,同时也没有修订value 及text为_value _text
运行结果如下
可以获取value值,而非displayText
使用中需要引用3个文件,MultiSelect.js ,ItemSelector.js,MultiSelect.css
二、参考官方示例程序,中文表现为乱码,需要将以上文件,另存为utf-8格式
三、官方示例程序程序中,如果不做修改,只能获取displayText
四、如果采用json从后台获取,不能自定义displayField和valueField属性,否则在接受框没有选择的值出现.
因笔者通过SQL语句以value text方式,发现数据库不允许这样操作,提示为系统保留字符存在,例如以下语句:
select sId as value,Stext as text from xxx
为此,对该插件,笔者修改一下几个地方,可以完善:
1:修改MultiSelect.js插件,将使用value 和text位置,变更为_value _text,主要是以下位置
if(Ext.isArray(this.store)){ if (Ext.isArray(this.store[0])){ this.store = new Ext.data.ArrayStore({ fields: ['_value','_text'], data: this.store }); this.valueField = '_value'; }else{ this.store = new Ext.data.ArrayStore({ fields: ['_text'], data: this.store, expandData: true }); this.valueField = '_text'; } this.displayField = '_text'; } else { this.store = Ext.StoreMgr.lookup(this.store); } //后台返回的字段为_value 和_text,例如: //select sID as _value,Stext as _text from XXX等语句 //采用json获取数据代码可参考一下方式: var DSformstore=new Ext.data.Store({ baseParams:{classid:classid}, //带有参数 autoLoad:true, autoDestroy:true, proxy:new Ext.data.HttpProxy({ method:'GET', url:'GetPowerList.asp?Action=GetGParray&' }), reader:new Ext.data.JsonReader({ },['_value','_text']) }); //接受框store ,定义如下: var storeTo = new Ext.data.ArrayStore({ fields: ['_value', '_text'] });
2: 为获取选择框的value值,需要修改ItemSelector的setValue()函数,笔者代码参考以下网址:
http://abgne.tw/ext-js/ext-js-tips/itemselector-setvalue-item.html
Ext.override(Ext.ux.form.ItemSelector, { setValue: function(values) { var index; var selectionsArray = []; this.toMultiselect.view.clearSelections(); this.hiddenField.dom.value = ''; if (!values || (values == '')) { return; } if (!Ext.isArray(values)) { values = values.split(this.delimiter); } for (var i=0; i<values.length; i++) { index = this.fromMultiselect.view.store.indexOf(this.fromMultiselect.view.store.query(this.fromMultiselect.valueField, new RegExp('^' + values[i].trim() + '$', "i")).itemAt(0)); if (index > -1) { selectionsArray.push(index); } } var records = [], record; if (selectionsArray.length > 0) { for (var i=0; i<selectionsArray.length; i++) { var record = this.fromMultiselect.view.store.getAt(selectionsArray[i]); records.push(record); } if(!this.allowDup)selectionsArray = []; for (var i=0; i<records.length; i++) { record = records[i]; if(this.allowDup){ var x=new Ext.data.Record(); record.id=x.id; delete x; this.toMultiselect.view.store.add(record); }else{ this.fromMultiselect.view.store.remove(record); this.toMultiselect.view.store.add(record); selectionsArray.push((this.toMultiselect.view.store.getCount() - 1)); } } } this.toMultiselect.view.refresh(); this.fromMultiselect.view.refresh(); var si = this.toMultiselect.store.sortInfo; if(si){ this.toMultiselect.store.sort(si.field, si.direction); } this.toMultiselect.view.select(selectionsArray); } });
3:具体使用方法举例如下:(这里直接是应用官方示例程序,没有使用json从后台获取数据,同时也没有修订value 及text为_value _text
var dsform = new Ext.data.ArrayStore({ data: [[123,'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']], fields: ['value','text'], sortInfo: { field: 'value', direction: 'ASC' } }); var dsto = new Ext.data.ArrayStore({ fields: ['value', 'text'] }); var isForm = new Ext.form.FormPanel({ title: 'ItemSelector Test', width:700, bodyStyle: 'padding:10px;', renderTo: 'itemselector', items:[{ xtype: 'itemselector', name: 'itemselector', fieldLabel: 'ItemSelector', imagePath: '../ux/images/', multiselects: [{ width: 180, height: 200, store: dsform , displayField: 'text', valueField: 'value' },{ width: 150, height: 200, store: dsto, displayField: 'text', valueField: 'value', tbar:[{ text: '清除选择项目', handler:function(){ isForm.getForm().findField('itemselector').reset(); } }] }] }], buttons: [{ text: 'Save', handler: function(){ if(isForm.getForm().isValid()){ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ isForm.getForm().getValues(true)); } } }] });
运行结果如下
可以获取value值,而非displayText
发表评论
-
itemselector-multiselect的数据过滤
2010-12-16 23:07 1834纠结了半天,重写不了方法,只好改源码了。 itemselect ... -
ExtJS DeskTop组件的学习
2010-12-12 23:02 2385网上千篇一律的 sample.js的代码解释。 //菜单里 ... -
[转载]Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理
2010-12-12 23:00 1271使用Ext.Ajax.request提交数据的代码如下(这段代 ... -
[转载]ExtJS中tabPanel的实现详解
2010-12-12 22:59 1749在做这项目有快一年了,有些体会想和大家分享分享,所以决定利用这 ... -
[转载]Ext中TreePanel控件和TabPanel控件搭配测试
2010-12-12 22:58 984在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
[转载]EXT核心API详解Ext.widgets(二十)-grid(2)
2010-12-12 22:57 1056Ext.grid.EditorGridPanel 可编辑数据表 ... -
[转载]EXT核心API详解Ext.widgets(十九)-grid(1)
2010-12-12 22:56 827Ext.grid.ColumnModel 用于定义Grid的列 ... -
[转载]EXT核心API详解Ext.Toolbar(十八)
2010-12-12 22:55 1346构造 add( Mixed arg1, Mixed arg2 ... -
[转载]EXT核心API详解Ext.menu.Menu(十七)
2010-12-12 22:55 1189Ext.menu.Menu 菜单对象 config{ ... -
[转载]EXT核心API详解Ext.widgets(十六)-form(下)
2010-12-12 22:54 881Ext.form.NumberField 继承自E ... -
[转载]EXT核心API详解Ext.widgets(十五)-form(上)
2010-12-12 22:54 830Ext.form.BasicForm 对应一个dom中的for ... -
[转载]EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton
2010-12-12 22:53 856Ext.Action action实现一个脱离了容 器的事件, ... -
[转载]EXT核心API详解Ext.data(十三)-Tree/Node
2010-12-12 22:51 910Ext.data.Tree 继承自Observab ... -
[转载]EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore javascript
2010-12-12 22:51 784Ext.data.GroupingStore 继承自Ext.d ... -
[转载]EXT核心API详解Ext.data(十一)-Store
2010-12-12 22:50 703Ext.data.Store store是一个为Ext器件提 ... -
[转载]EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader javascript
2010-12-12 22:49 831Ext.data.DataReader 纯虚类,从数据源得到 ... -
EXT核心API详解(九)-Ext.data-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy javascript
2010-12-12 22:48 1184Ext.data.DataProxy 数据代理类是一个纯虚类 ... -
[转载]EXT核心API详解(八)-Ext.dat-Connection/Ajax/Record javascript
2010-12-12 22:46 701Ext.data.Connection 访问指 ... -
[转载]EXT核心API详解(七)-Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetri
2010-12-12 22:46 722Ext.KeyNav Ext的keyNav类能为Ext.El ... -
[转载]EXT核心API详解(六)Ext.Fx
2010-12-12 22:45 696Ext.Fx类 对于我这样的 ...
相关推荐
4.2自带的itemselector,有问题,只有fromstore没有tostore,作了一些修改,可以使用,附件中有效果图
基于itemselector做出的拓展,fromField以树结构展示。
Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。
Extjs 中文API文档,有对Extjs相关API的中文说明
使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...
extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例
ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!!
ExtJs 实例+ExtJs中文教程 大量ExtJs的实例和目前最好的ExtJs中文教程,学习ExtJs的朋友可以参考一下
ExtJS中文文档,很好,很强大!绝对值得一看哦!
extjs3.3的中文文档
绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!
新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API
extjs 中文 api chm格式的!可以跟好的帮助你学习富客户端技术!!!!!!
收集了ExtJS中文站上的资料,共52篇文章,保留了文章的原始风貌,支持关键字查询,里面的内容可以选择后ctrl-C拷出来。赚个辛苦分。
extjs4.1 中文API
Extjs 中文文档 学习文档
ExtJs中Store加载(load)时候提示信息
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
extjs中使用FusionChart举例
extjs中的多选列表,extjs中没有实现多选列表。这是别人作的封装。我找到的。