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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值