ExtJs中FormPanel中遇到radiogroup、checkboxgroup時賦值問題！！！

在Extjs中常常会遇到各种各样的问题，诸如在FormPanel中出现radiogroup、checkboxgroup与数据库交互时的提交时，你需要的是字符串格式或者指定的格式，但提交时显示的（如：json格式）仍然是一个数组形式，不如我们重写(override)它的getValue()来转换成我们的格式如何？那么我们这样实现：

   getValue:function(){
          var out="";//我要装换成的格式是字符串形式
          this.items.each(function(item){
                     out+=item.name+"," ;//(或者item.id、item.boxLabel、item.inputValue等)
          }); 
          console.log(out);
          return out;
   }

 

因为各人遇到的情况不同，而解决的办法就更加不同，重写了checkboxgroup的getValue我发现仍然解决不了我的问题，因为我发现即使我重写了getValue()方法，它依然返回的是个数组，但又确定调用了我重写的getValue()方法，郁闷了半天，都不知道问题出在哪里？

        重新整理思路：我左边是个扩展了GridPanel的Grid,右边是扩展了FormPanel的Form,要求在Grid中选中一行时，右边的FormPanel就可以加载该数据，在这个过程中，加载数据到checkboxgroup中需要重写（override）才能加载：

Ext.override(Ext.form.CheckboxGroup,{
    setValueForItem : function(val){
    	
        val = String(val).split(',');

        this.items.each(function(item){
                item.setValue(false);   //初始化，現將所有的checkbox設為未選定。
        });
        //this.items.each()<====>this.eachItem();
        
        this.items.each(function(item){
            if(val.indexOf(item.inputValue)> -1){   //從數據庫中提取數據，與頁面上checkbox的inputValue對比來判斷是否選中。
                item.setValue(true);    //可理解為以下：
            }         
            /*
              等價于：
             for(var i=0;i<val.length;i++){
                 if(var[i]==item.inputValue){
                     item.setValue(true);
                 }
             }    
            */
        });   
    }
});

 不然的话，只会加载文本框的值； 同时右边的Form中的值更改后要求先保存到左边的Grid的store中，再保存到数据库中去，因为我数据库中对应于checkboxgroup的字段是字符串型，所以在Form提交时就要先转化为字符串！这就是我要实现的要求，现在是提交时总是转化不了！

           要Form提交,则肯定要把更改的数据重新设值到Form中，于是就有

this.getForm().updateRecord(record)

    getForm() 是得到的 Ext.form.BasicForm,它的updateRecord为：

updateRecord( Record record ) : BasicForm

    经过仔细阅读，发现updateRecord（）内部中会对Form中的信息重新设值，这也是我希望的，但发现其对radiogroup、checkboxgroup的实现与我要求的不同，于是，最终的解决办法就是把其中的方法重写即可：

Ext.override(Ext.form.BasicForm,{	
   findField : function(id){   //此部份是爲了讓BasicForm能夠找到不只是FormField，讓他能夠試用于radiogroup、checkboxgroup的情況.
        var field = this.items.get(id); 
        
        if(!field){
            this.items.each(function(f){
                if((f.isXType('radiogroup')||f.isXType('checkboxgroup'))&& (f.dataIndex == id || f.id == id || f.getName() == id)){
                    field = f;
                    return false;
                }
                                
                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
                    field = f;
                    return false;
                }
            });
        }
        return field || null;
    }
    ,updateRecord : function(record){ //既然已經能夠試用于radiogroup、checkboxgroup了！那麼在Form中當然就要對其設置獲取的值啦！
        record.beginEdit();
        var fs = record.fields;
        fs.each(function(f){
            var field = this.findField(f.name);
            if(field){
                var value = field.getValue();
                
                if ( value.getGroupValue ) {
                    value = value.getGroupValue();
                   
                } else if ( field.eachItem ) {
         			var re = "";  
	        		field.eachItem(function(item){
	             		if(item.getValue() == true){  
	                 		re += item.inputValue + ",";  
	             		}  
	        		});
					if (re.length > 0){
						value = re.substr(0,re.length - 1);  
					}else{
						value = re	
					}
                }
                record.set(f.name, value);
            }
        }, this);
        record.endEdit();
        return this;
    }
});

 其实就是在其中实现当遇到radiogroup、checkboxgroup的实现方式，这里才是最终的实现。问题终于解决，在此留下足迹以待以后遇到类似的问题能够解决问题！

 

整个实现代码如下（总结）：

Ext.override(Ext.form.CheckboxGroup,{
    
    setValueForItem : function(val){
    	
        val = String(val).split(',');

        this.items.each(function(item){
                item.setValue(false);   //初始化，現將所有的checkbox設為未選定。
        });
        //this.items.each()<====>this.eachItem();
        
        this.items.each(function(item){
            if(val.indexOf(item.inputValue)> -1){   //從數據庫中提取數據，與頁面上checkbox的inputValue對比來判斷是否選中。
                item.setValue(true);    //可理解為以下：
            }         
            /*
              等價于：
             for(var i=0;i<val.length;i++){
                 if(var[i]==item.inputValue){
                     item.setValue(true);
                 }
             }    
            */
        });   
    }
});



Ext.override(Ext.form.BasicForm,{
	
   findField : function(id){   //此部份是爲了讓BasicForm能夠找到不只是FormField，讓他能夠試用于radiogroup、checkboxgroup的情況.
        var field = this.items.get(id);     
        if(!field){
            this.items.each(function(f){
                if((f.isXType('radiogroup')||f.isXType('checkboxgroup'))&& (f.dataIndex == id || f.id == id || f.getName() == id)){
                    field = f;
                    return false;
                }                      
                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
                    field = f;
                    return false;
                }
            });
        }
        return field || null;
    }
    ,updateRecord : function(record){ //既然已經能夠試用于radiogroup、checkboxgroup了！那麼在Form中當然就要對其設置獲取的值啦！
        record.beginEdit();
        var fs = record.fields;
        fs.each(function(f){
            var field = this.findField(f.name);
            if(field){
                var value = field.getValue();
                
                if ( value.getGroupValue ) {
                    value = value.getGroupValue();
                   
                } else if ( field.eachItem ) {
         			var re = "";  
	        		field.eachItem(function(item){
	             		if(item.getValue() == true){  
	                 		re += item.inputValue + ",";  
	             		}  
	        		});
					if (re.length > 0){
						value = re.substr(0,re.length - 1);  
					}else{
						value = re	
					}
                }
                record.set(f.name, value);
            }
        }, this);
        record.endEdit();
        return this;
    }
});