Extjs中itemselector组件自定义方法得到displayField值

首先来看一下，这个在双选框的效果图：

在引入的itemselector.js文件中，只定义了getvalue()的方法得到的是value的值，而我现在要的是

displayField的值，所以我在itemselector.js文件中：

<strong>/*!* Ext JS Library 3.2.0* Copyright(c) 2006-2010 Ext JS, Inc.* licensing@extjs.com* http://www.extjs.com/license*/
/** Note that this control will most likely remain as an example, and not as a core Ext form* control.  However, the API will be changing in a future release and so should not yet be* treated as a final, stable API at this time.*//*** @class Ext.ux.form.ItemSelector* @extends Ext.form.Field* A control that allows selection of between two Ext.ux.form.MultiSelect controls.**  @history*    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)** @constructor* Create a new ItemSelector* @param {Object} config Configuration options* @xtype itemselector*/
Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {hideNavIcons:false,imagePath:"",iconUp:"up2.gif",iconDown:"down2.gif",iconLeft:"left2.gif",iconRight:"right2.gif",iconTop:"top2.gif",iconBottom:"bottom2.gif",drawUpIcon:true,drawDownIcon:true,drawLeftIcon:true,drawRightIcon:true,drawTopIcon:true,drawBotIcon:true,delimiter:',',bodyStyle:null,border:false,defaultAutoCreate:{tag: "div"},/*** @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)*/multiselects:null,availableTitle : 'Available',selectedTitle : 'Selected',draggable : false,droppable : false,maxSelectedSize : Number.MAX_VALUE,text:null,initComponent: function(){Ext.ux.form.ItemSelector.superclass.initComponent.call(this);this.addEvents({'rowdblclick' : true,'change' : true});},onRender: function(ct, position){Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);var at = this.availableTitle;var st = this.selectedTitle;// Internal default configuration for both multiselectsvar msConfig = [{legend: at,draggable: this.draggable,droppable: this.droppable,width: 100,height: 100},{legend: st,draggable: this.draggable,droppable: this.droppable,width: 100,height: 100}];this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));this.fromMultiselect.on('dblclick', this.onRowDblClick, this);this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));this.toMultiselect.on('dblclick', this.onRowDblClick, this);var p = new Ext.Panel({bodyStyle:this.bodyStyle,border:this.border,layout:"table",layoutConfig:{columns:3}});p.add(this.fromMultiselect);var icons = new Ext.Panel({header:false});p.add(icons);p.add(this.toMultiselect);p.render(this.el);icons.el.down('.'+icons.bwrapCls).remove();// ICON HELL!!!if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")this.imagePath+="/";this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');var el=icons.getEl();this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});el.createChild({tag: 'br'});this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});el.createChild({tag: 'br'});this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});el.createChild({tag: 'br'});this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});el.createChild({tag: 'br'});this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});el.createChild({tag: 'br'});this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});this.toTopIcon.on('click', this.toTop, this);this.upIcon.on('click', this.up, this);this.downIcon.on('click', this.down, this);this.toBottomIcon.on('click', this.toBottom, this);this.addIcon.on('click', this.fromTo, this);this.removeIcon.on('click', this.toFrom, this);if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }var tb = p.body.first();this.el.setWidth(p.body.first().getWidth());p.body.removeClass();this.hiddenName = this.name;var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};this.hiddenField = this.el.createChild(hiddenTag);},doLayout: function(){if(this.rendered){this.fromMultiselect.fs.doLayout();this.toMultiselect.fs.doLayout();}},afterRender: function(){Ext.ux.form.ItemSelector.superclass.afterRender.call(this);this.toStore = this.toMultiselect.store;this.toStore.on('add', this.valueChanged, this);this.toStore.on('remove', this.valueChanged, this);this.toStore.on('load', this.valueChanged, this);this.valueChanged(this.toStore);},toTop : function() {var selectionsArray = this.toMultiselect.view.getSelectedIndexes();var records = [];if (selectionsArray.length > 0) {selectionsArray.sort();for (var i=0; i<selectionsArray.length; i++) {record = this.toMultiselect.view.store.getAt(selectionsArray[i]);records.push(record);}selectionsArray = [];for (var i=records.length-1; i>-1; i--) {record = records[i];this.toMultiselect.view.store.remove(record);this.toMultiselect.view.store.insert(0, record);selectionsArray.push(((records.length - 1) - i));}}this.toMultiselect.view.refresh();this.toMultiselect.view.select(selectionsArray);},toBottom : function() {var selectionsArray = this.toMultiselect.view.getSelectedIndexes();var records = [];if (selectionsArray.length > 0) {selectionsArray.sort();for (var i=0; i<selectionsArray.length; i++) {record = this.toMultiselect.view.store.getAt(selectionsArray[i]);records.push(record);}selectionsArray = [];for (var i=0; i<records.length; i++) {record = records[i];this.toMultiselect.view.store.remove(record);this.toMultiselect.view.store.add(record);selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));}}this.toMultiselect.view.refresh();this.toMultiselect.view.select(selectionsArray);},up : function() {var record = null;var selectionsArray = this.toMultiselect.view.getSelectedIndexes();selectionsArray.sort();var newSelectionsArray = [];if (selectionsArray.length > 0) {for (var i=0; i<selectionsArray.length; i++) {record = this.toMultiselect.view.store.getAt(selectionsArray[i]);if ((selectionsArray[i] - 1) >= 0) {this.toMultiselect.view.store.remove(record);this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);newSelectionsArray.push(selectionsArray[i] - 1);}}this.toMultiselect.view.refresh();this.toMultiselect.view.select(newSelectionsArray);}},down : function() {var record = null;var selectionsArray = this.toMultiselect.view.getSelectedIndexes();selectionsArray.sort();selectionsArray.reverse();var newSelectionsArray = [];if (selectionsArray.length > 0) {for (var i=0; i<selectionsArray.length; i++) {record = this.toMultiselect.view.store.getAt(selectionsArray[i]);if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {this.toMultiselect.view.store.remove(record);this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);newSelectionsArray.push(selectionsArray[i] + 1);}}this.toMultiselect.view.refresh();this.toMultiselect.view.select(newSelectionsArray);}},fromTo : function() {
//      debuggervar selectionsArray = this.fromMultiselect.view.getSelectedIndexes();var records = [];var selectCount = this.toMultiselect.view.store.getCount();if (selectionsArray.length > 0 && selectCount < this.maxSelectedSize) {for (var i=0; i<selectionsArray.length; i++) {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));}}} else {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);},toFrom : function() {var selectionsArray = this.toMultiselect.view.getSelectedIndexes();var records = [];if (selectionsArray.length > 0) {for (var i=0; i<selectionsArray.length; i++) {record = this.toMultiselect.view.store.getAt(selectionsArray[i]);records.push(record);}selectionsArray = [];for (var i=0; i<records.length; i++) {record = records[i];this.toMultiselect.view.store.remove(record);if(!this.allowDup){this.fromMultiselect.view.store.add(record);selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));}}}this.fromMultiselect.view.refresh();this.toMultiselect.view.refresh();var si = this.fromMultiselect.store.sortInfo;if (si){this.fromMultiselect.store.sort(si.field, si.direction);}this.fromMultiselect.view.select(selectionsArray);},valueChanged: function(store) {var record = null;var values = [];var texts=[];for (var i=0; i<store.getCount(); i++) {record = store.getAt(i);values.push(record.get(this.toMultiselect.valueField));texts.push(record.get(this.toMultiselect.displayField))}this.hiddenField.dom.value = values.join(this.delimiter);this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);//赋值给自定的text全局变量this.text=texts;},getValue : function() {return this.hiddenField.dom.value;},//自定义一个方法去得到displayField值getText : function(){return this.text;},onRowDblClick : function(vw, index, node, e) {if (vw == this.toMultiselect.view){this.toFrom();} else if (vw == this.fromMultiselect.view) {this.fromTo();}return this.fireEvent('rowdblclick', vw, index, node, e);},reset: function(){range = this.toMultiselect.store.getRange();this.toMultiselect.store.removeAll();this.fromMultiselect.store.add(range);var si = this.fromMultiselect.store.sortInfo;if (si){this.fromMultiselect.store.sort(si.field, si.direction);}this.valueChanged(this.toMultiselect.store);}
});Ext.reg('itemselector', Ext.ux.form.ItemSelector);//backwards compat
Ext.ux.ItemSelector = Ext.ux.form.ItemSelector; </strong>

其中，我先定义一个全局的变量： text:null,再定义一个方法：

getText : function(){return this.text;},

所以在

<strong> valueChanged: function(store) {var record = null;var values = [];var texts=[];for (var i=0; i<store.getCount(); i++) {record = store.getAt(i);values.push(record.get(this.toMultiselect.valueField));texts.push(record.get(this.toMultiselect.displayField))}this.hiddenField.dom.value = values.join(this.delimiter);this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);//赋值给自定的text全局变量this.text=texts;},</strong>

我加入了var texts=[], texts.push(record.get(this.toMultiselect.displayField)),

最后赋值给之前定义的全局变量this.text=texts;

这样在用到组件itemselector的时候，就可以调用getText()方法去获得displayFiled的值了。

Extjs中itemselector组件自定义方法得到displayField值相关推荐

ExtJS中如何根据combobox的选值，动态地决定组件的显隐？
來源:http://www.javaeye.com/problems/3168 ExtJS所做的Form,需要根据combobox选择值,来决定后面所显示的组件.办法是动态地加在FormPanel中的 ...
Extjs中的组件含有ID，会导致界面混乱。(textfield,comboBox等)
我的代码中的一些控件开始都有ID,在我新打开一些窗口的时候,总会出现界面的混乱. 后来把ID删除了,改成name属性,才不会出现如此状况. 但是还不太了解其原因原来代码(部分前台控件代码,id有值的 ...
extjs 提交表单给php,JavaScript_Extjs学习笔记之二初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
antd 给input设置值_Antd 中 Input 组件默认值的显示
1.input标签中有placeholder可以显示默认值但是有少量样式的问题(字体颜色会淡一点) placeholder属性 2.用Input组件中的defaultValue属性 defaultV ...
React（04）：React中的组件化及父子组件间的传值取值
前言接着前一篇继续学习React组件化 React(03):React中的JSX语法正文什么是组件化: 是从 UI 界面视图的角度来进行分析的:把一些可复用的UI元素,抽离为单独的组件:便于项 ...
小程序如何修改缓存中的某一个字段的值；小程序中如何应用vant组件如：van-dropdown-item、van-field
1.小程序如何往缓存中存数据将数据放入指定缓存中. 这里缓存块的名称叫'mydata',你可以根据自己的需求,取合适的名字.代码如下 let data = {name: '8BQ了',age: '1 ...
解决Extjs中Combobox显示值和真实值赋值问题
用过Extjs的朋友相信都知道在Extjs的Combobox组件中是由两个值来组成的.一个是displayField这个是用来显示给我们看的,而另一个是真正给系统用的valueField,举个例子会 ...
ExtJS中layout的12种布局风格
总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, ...
vue中中的组件通信
1.父组件传递给子组件信息props 写法简说:父组件中通过v-bind方法绑定子组件中的props中的方法,然后通过该方法绑定值,下文中的是v-bind:(props_name) = "父 ...

Extjs中itemselector组件自定义方法得到displayField值

Extjs中itemselector组件自定义方法得到displayField值相关推荐

最新文章

热门文章