玩EXT框架的人肯定会用到combox组件。那么我们来看看下面两种情况:
第一种:数据在本地,也就是说mode:'local'
new Ext.form.ComboBox({
fieldLabel : '对象名称',
hiddenName : 'permissionobjectName',
store : new Ext.data.SimpleStore({
fields : ['objectValue', 'permissionobjectName'],
data : [['增加', '增加'], ['修改', '修改'], ['删除', '删除']]
}),
valueField : 'objectValue',
displayField : 'permissionobjectName',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
allowBlank:false,
blankText : '请对象名称',
emptyText : '选择对象名称',
selectOnFocus : true,
width : 190
})
像这种情况修改时,直接到对应的store中读取数据.
第二种情况远程加载数据,也就是mode:'remote',默认就是远程加载,看一段代码:
{
xtype:'combo',
fieldLabel : '模块名称',
store : moduleStore,
displayField : 'moduleName',
valueField : 'moduleId',
hiddenName : 'moduleId',
autocomplete:'on',
queryDelay:50,
minChars :1,
//pageSize:10,
triggerAction :'all',
forceSelection : true,
selectOnFocus : true,
typeAhead : true
}
像这种情况,修改时就会碰到一个头痛的问题,displayField的值是hiddenName的值。也是说只显示value,不显示text。原因是什么呢?先分析一下BaseForm.js源代码,我们只看其中用到的几个方法:
setValues : function(values){
if(Ext.isArray(values)){ // array of objects
for(var i = 0, len = values.length; i < len; i++){
var v = values[i];
var f = this.findField(v.id);
if(f){
f.setValue(v.value);
if(this.trackResetOnLoad){
f.originalValue = f.getValue();
}
}
}
}else{ // object hash
var field, id;
for(id in values){
if(typeof values[id] != 'function' && (field = this.findField(id))){
field.setValue(values[id]);
if(this.trackResetOnLoad){
field.originalValue = field.getValue();
}
}
}
}
return this;
},
findField : function(id){
var field = this.items.get(id);
if(!field){
this.items.each(function(f){
[color=red]if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id))[/color]{
field = f;
return false;
}
});
}
return field || null;
}
看到红色那句代码没有啊,原理是遍历得到的这个条记录,也就是store中一个record,当遍历到与displayField对应的字段(因为displayField的name在store的dataIndex中肯定找的到)时,不满足条件就返回一个null,所以肯定得不到要显示的text,因而就显示hiddenName(因为在没有批定name时,hiddenName相当name)
那接下来就覆盖setValue与findField这两个方法
/**
* Find a Ext.form.Field in this form by id, dataIndex, name or hiddenName.
* @param {String} id The value to search for
* @return Field
*/
findField : function(id,value){
var field = this.items.get(id);
if(!field){
this.items.each(function(f){
if(f.isXType('combo')){
if(f.displayField==id){
field = f;
return false;
}
}
if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
field = f;
return false;
}
});
}
return field || null;
},
loadData:function(id,value){
var field = this.items.get(id);
if(!field){
this.items.each(function(f){
if(f.isXType('combo')){
if(f.mode=='remote'&&f.isFormField &&f.displayField==id){
f.store.load({
params : {
'query':value
}
});
}
}
});
}
},
setValues : function(values){
if(Ext.isArray(values)){ // array of objects
for(var i = 0, len = values.length; i < len; i++){
var v = values[i];
var f = this.findField(v.id);
if(f){
f.setValue(v.value);
if(this.trackResetOnLoad){
f.originalValue = f.getValue();
}
}
}
}else{ // object hash
var field, id;
for(id in values){
if(typeof values[id] != 'function'){
this.loadData(id,values[id]);
}
}
for(id in values){
if(typeof values[id] != 'function' &&(field = this.findField(id,values[id]))){
field.setValue(values[id]);
if(this.trackResetOnLoad){
field.originalValue = field.getValue();
}
}
}
}
return this;
}
看得仔细的肯定会发现多了一个方法loadData,为什么呢?去掉这个方法,确实修改时displayField可以得到了,但是有一个严重的问题,hiddenName的值与displayField的值一样了,这样提交到后台肯定会报异常。为什么?原因是combox中的store没有加载,所以就出就现在这种问题,加上loadData这个方法就可以解决啦。
分享到:
相关推荐
NULL 博文链接:https://firezhfox.iteye.com/blog/1885329
此comboxTree优点多多,可自己配置属性。
Extjs 下拉菜单实现拼音输入进行检索
当需要为ComboBox加载数据后进行赋初始选中项的话,如果是写在store.load()之后
主要介绍了ExtJS4如何给Combobox设置列表中的默认值,需要的朋友可以参考下
在PropertyGrid中使用Combobox来选择值时,得到的应该是displayField的值,但是在确认选择的时候却显示了valueField的值
代码如下:var showForm; function panelShowForm() { showForm=null; showForm = new Ext.FormPanel({ renderTo:”showPanel”, region:’north’, border:false, bodyBorder:false, frame:true, waitMsgTarget: ...
从页面布局和使用的控件TextBox,Combox,Button,ToolBar,StateBar,Panel,TabPanel,ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置,基本不需要额外美工处理,同时支持ajax无刷新效果。
extcombox搜索功能
EXTjsEXT中COMBOX联动EXT中COMBOX联动EXT中COMBOX联动EXT中COMBOX联动EXT中COMBOX联动
Extjs 4.1 下拉框 Tree 的实现(mvc)
下拉框中要添加一项 ’所有‘ ,由于是combox无法使用option
从页面布局和使用的控件TextBox,Combox,Button,ToolBar,StateBar,Panel,TabPanel,ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置,基本不需要额外美工处理,同时支持ajax无刷新效果。...
本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...
3、有志于从事富客户端技术ExtJs的学习与研究的学生及专业Web开发人员 模块介绍 1、ExtJs基础篇-ExtJs快速入门 1.1、ExtJs基础篇(1):ExtJs概述与环境配置及架构剖析 1.2、ExtJs基础篇(2):ExtJs OOP基础 1.3、...
从页面布局和使用的控件TextBox,Combox,Button,ToolBar,StateBar,Panel,TabPanel,ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置,基本不需要额外美工处理,同时支持ajax无刷新效果。
从页面布局和使用的控件TextBox,Combox,Button,ToolBar,StateBar,Panel,TabPanel,ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置,基本不需要额外美工处理,同时支持ajax无刷新效果。...
从页面布局和使用的控件TextBox,Combox,Button,ToolBar,StateBar,Panel,TabPanel,ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置,基本不需要额外美工处理,同时支持ajax无刷新效果。...
ExtJs4.2 ComboBox扩展 下拉树 多选菜单