实现Ext表单对checkBoxGroup的统一管理

实现Ext表单对checkBoxGroup的统一管理

1 对于类型是checkboxgroup的数据，数据库中保存数据的格式是value1,value2...valueN，其中1~N的数据有可能不存在，如果选中则存在，最后拼接成一个串。
在Ext中，通过Record对象向FormPanel中的内置对象BasicForm加载数据时，采用的是setValues方法，而setValues第一步要通过Record中定义的name使用findField方法找到表单元素，遗憾的是，继承了Field的checkboxgroup组件并不能正确的通过getName返回自身引用，所以，需要对getName方法进行重写，此外，为了适应我们采用的数据格式，对于该组件的setValue（被setValues调用）和getValue（获取到已加工的数据，此事后话）也要进行重写。故而对于形如：

{     
   xtype: 'checkboxgroup',   
   name: 'biztype',     
   width:  220 ,   
   columns:  3 ,   
   fieldLabel: '业务类别',   
   items: [     
       {boxLabel: '类别1', inputValue: ' 01 '},     
       {boxLabel: '类别2', inputValue: ' 02 '},     
       {boxLabel: '类别3', inputValue: ' 03 '},     
       {boxLabel: '类别4', inputValue: ' 04 '}     
       ]     
 }  

的checkboxgroup定义，需重写类如下：
 

Ext.override(Ext.form.CheckboxGroup,{    
     // 在inputValue中找到定义的内容后，设置到items里的各个checkbox中    
    setValue :  function (value){   
         this .items.each( function (f){   
             if (value.indexOf(f.inputValue)  !=   - 1 ){   
                f.setValue( true );   
            } else {   
                f.setValue( false );   
            }   
        });   
    },   
     // 以value1,value2的形式拼接group内的值   
    getValue :  function (){   
         var  re  =   "" ;   
         this .items.each( function (f){   
             if (f.getValue()  ==   true ){   
                re  +=  f.inputValue  +   " , " ;   
            }   
        });   
         return  re.substr( 0 ,re.length  -   1 );   
    },   
     // 在Field类中定义的getName方法不符合CheckBoxGroup中默认的定义，因此需要重写该方法使其可以被BasicForm找到   
    getName :  function (){   
         return   this .name;   
    }   
});

2 通过内置对象basicForm的getValues方法可以获取到一个form的完整json数据，但遗憾的事，这里取到的是dom的raw数据，类似emptyText的数据也会被返回，而Field的getValue方法不存在这个问题，所以如果想要返回一个非raw的json集合，可以给formpanel添加如下方法：

getJsonValue: function (){   
     var  param  =  '{';   
     this .getForm().items.each( function (f){   
         var  tmp  =  ' " ' + f.getName() + ' " : " ' + f.getValue() + ' " ,';   
        param  +=   tmp;   
    });   
    param  =  param.substr( 0 ,param.length  -   1 )  +  '}';   
     return  param;   
}  

这个方法同样适用于上面定义的checkboxgroup，如此就可以把前后台的数据通过json统一起来了

 @2008 杨一. 版权所有. 保留所有权利