LovCombo是Ext的ux扩展中提供的下拉多选控件。当这个控件用在编辑表格EditorGridPanel上时,下拉选择多个选项后,会出现选中的数据丢失的问题。在网上查找了一下资料,没有找到解决方案,于是只好自己分析。问题解决过程中王亮
给予了大力支持,在此表示感谢!另作本文记录下这个问题的解决方法,与大家分享并备忘。
首先,说明一下问题的原因。LovCombo这个控件在Ext的示例中存在,并且是可用的,但是示例并没有将它放到EditorGridPanel上使
用,所以没有暴露问题。当这个控件放到EditorGridPanel上后,编辑完成焦点丢失,EditorGrid上的Editor会调用到一个叫做assertValue()的方法。这个方法是Ext的Combo
中
的,LovCombo继承自Combo但没有覆盖此方法。在这个方法的最后调用了this.setValue,将多选控件选中的选项以显示名称加逗号分割
的方式传入到了setValue中。而setValue无法识别这种逗号分割的显示值的字符串,它只支持以逗号分割的value字符串。经过运行后认为传
入的参数认为无法解读,便为控件设置了空值。所以选中的选项丢失了。
解决这个问题,可以有几种方案。个人选择了比较直接的一种。让LovCombo覆盖掉Combo中的
assertValue方法,不让其把逗号分割的显示值传入到setValue中,而传入给它逗号分割的value值。
修改
Ext的LovCombo类代码,在
里面加入下面的代码:
// 修正 : 当多选控件放到grid中时,grideditor会调用combobox中的这个方法。将选中的显示值传入到setvalue中,导致选择丢失。
,assertValue : function(){
var val = this.getRawValue(),
rec,arr_rec,i=0;
// 分离value为数组,循环取rec
var arr_val = val.split(this.separator);
var arr_value = this.value.split(this.separator);
for(;i<arr_val.length;i++){
if(this.valueField && Ext.isDefined(arr_value[i])){
rec = this.findRecord(this.valueField, arr_value[i]);
}
if(!rec || rec.get(this.displayField) != arr_val[i].trim()){
rec = this.findRecord(this.displayField, arr_val[i].trim());
}
if(rec && !arr_rec){
arr_rec = [];
}
if(rec){
arr_rec.push(rec);
}
}
if(!arr_rec && this.forceSelection){
if(val.length > 0 && val != this.emptyText){
this.el.dom.value = Ext.value(this.lastSelectionText, '');
this.applyEmptyText();
}else{
this.clearValue();
}
}else{
if(arr_rec && this.valueField){
// onSelect may have already set the value and by doing so
// set the display field properly. Let's not wipe out the
// valueField here by just sending the displayField.
if (this.value == val){
return;
}
i = 0;
val = "";
var ival;
for(;i<arr_rec.length;i++){
ival = arr_rec[i].get(this.valueField);
if(!ival){
ival = arr_rec[i].get(this.displayField);
}
if(i ==0 ){
val = ival;
}else{
val = val+","+ival;
}
}
}
this.setValue(val);
}
}
由于是多选,所以首先分离传入的value值字符串,然后分别找到他们的record,从中取value值拼接字符串,然后交给setValue.为了不引起其他影响,代码修改是尽量保持了combo中assertValue方法的
原有代码逻辑。
有了这段代码LovCombo就可以正常的在EditorGridPanel上使用了。
本文由作者本人转载到itEye,
原文 : http://www.oecp.cn/hi/slx/blog/1168441
提供该文档的机构为 OECP社区
,更多的博客文章可以到 OECP社区
查看。该文档附件欢迎各位转载,在没有获得文章作者许可之前,不得对文章内容或者版权信息进行更改,版权归OECP社区
所有,仅此声明。
分享到:
相关推荐
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
NULL 博文链接:https://fourfire.iteye.com/blog/355853
ext 数据对象的定义 EditorGridPanel的使用 ext读取xml ext对各种数据格式的支持
73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65 1、Ext类 addBehaviors(Object obj) : void 对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ ...
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
NULL 博文链接:https://tonylian.iteye.com/blog/1735525
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、...73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65
因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
1.界面修改(css style): Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的... GroupingView, EditorGridPanel): Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属
6)Ext类库简介 7)Border区域布局 8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)...
1 A framework apart 2 Back to the basics 3 Events, Components, and Containers ...8 The EditorGridPanel 9 Taking root with Trees 10 Toolbars and Menus 11 Drag and drop with Widgets
替代页面上已经存在的Select控件 Grid EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口(模态窗口) MessageBox show(报错窗口、保存提示、选择窗口) alert...
….36 6.2 可编辑的表格EditorGridPanel……….………………………………………………………………………..…….41 6.3 与服务器交互……….………………………………………………………………………………...