ExtJS combox研究

玩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这个方法就可以解决啦。