实现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统一起来了。

 

----------------------------------------------------------

 

如果需要加入全选功能的话,可以在全选的checkbox或者其它控件的handler里加入如下方法体(示例为checkbox):

 

var g = formpanel.form.findfield('biztype');

var selectall =     formpanel.form.findfield('selectallitem').getValue();

g.items.each(function(f){   
           f.setValue(selectall);
}); 

 

------------------------------------------

设置ext的ajax非异步请求

var dataStr;
   var conn = Ext.lib.Ajax.getConnectionObject().conn;
   conn.open("post", '${ctx}/search/programSearch!getProgramPostfixs.action?vsBful=1',false);
   conn.send(null);
   dataStr=conn.responseText;

你可能感兴趣的:(Ajax,json,F#,ext)