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

实现Ext表单对checkBoxGroup的统一管理2011-10-29 BlogJava 杨一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统一起来了