ExtJs checkbox radiobox 问题 汇总

这个帖子主要记录我在使用ExtJs 中遇到的一些问题。
1、checkbox 和radiobox在IE下呈纵向显示的问题
添加如下css解决:

.x-form-check-wrap,.x-form-radio-wrap{padding:3px 0 0 0;line-height:15px;width:150px;}     
x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap{height:15px;}     
.ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{height:17px;}     
.commquery-grid-row {color: '#FF0000';!important;}     
.x-grid-record-red table{color: #FF0000;}   

2、动态生成checkbox 和radiobox
在项目应用中很多时候checkbox 和radiobox的值是从数据库当中读取并生成的。
首先我们建一个checkboxgroup

{     
     id:'id',     
     name:'name',     
     xtype : 'checkboxgroup',     
     fieldLabel : 'test',     
     columns : 3,     
     items:getData()     
}    

在其中我指定了该checkboxgroup的items是由getData()生成

. var itemArray        
 2.      
 3. function getData(){     
 4.    var conn = new Ext.data.Connection();     
 5.    conn.request({     
 6.        url: '',     
 7.        success: function(response) {     
 8.            itemArray = Ext.util.JSON.decode(response.responseText);     
 9.             Ext.getCmp('id').items=itemArray;     
10.           }     
11.        });     
12.   }     

在这里通过Connection从后台获取json并将值赋给checkboxgroup
json的格式如下

[{id:'id',boxLabel:'boxLabel',name:'name'},...] 

3、checkbox 和radiobox在Form中的赋值问题
由于Ext原来的checkbox 和radiobox是无法动态赋值的，通过添加下面代码修复

1. Ext.override(Ext.form.BasicForm,{        
 2.     findField : function(id){                
 3.         var field = this.items.get(id);     
 4.         if(!field){        
 5.             this.items.each(function(f){        
 6.                 if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){        
 7.                     f.items.each(function(c){        
 8.                         if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){        
 9.                             field = c;        
10.                             return false;        
11.                         }        
12.                     });        
13.                 }        
14.                                         
15.                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){        
16.                     field = f;        
17.                     return false;        
18.                 }        
19.             });        
20.         }        
21.         return field || null;        
22.     }         
23. });    

--------------------------------------------------------------------------------------------
1、我试过把checkbox数据用AJAX从后台取，加载时会报错，所以我把取数据放在jsp页面中，当加载页面时取数据然后生成json格式的checkbox数据，如下：

String data="[
   {boxLabel:'项目1',name:'item',readOnly:true,inputValue:'1'},
   {boxLabel:'项目2',name:'item',readOnly:true,inputValue:'2'},
   {boxLabel:'项目3',name:'item',readOnly:true,inputValue:'3'},
   {boxLabel:'项目4',name:'item',readOnly:true,inputValue:'4'},
   {boxLabel:'项目5',name:'item',readOnly:true,inputValue:'5'}, 
   {boxLabel:'项目6',name:'item',readOnly:true,inputValue:'6'}
] "

2、然后在页面在加js方法

<script type="text/javascript">
    function getCombData(){ 
     var data=<%=dataStr %>
     return data;
    }
   </script

>

3、在extjs中创建CheckboxGroup组件，注意红色字，心须要加的，要不然会出错

var comData=getCombData(); //取数据
var columNum=3; //设置checkbox的列数,默认是3
if(columNum<3)   //如果checkbox个数小于3时，列的长度设成checkbox个数
     columNum=comData.length; 
//体验范围数据
var itemsGroup = new Ext.form.CheckboxGroup({ 
    xtype:'checkboxgroup',
fieldLabel:'体验范围',
name:'items',
width:360,
columns:columNum,
items:comData     
});

这样CheckboxGroup数据就可以从数据库中动态加载过来了
-------------------------------------------------------------------------------- 对于类型是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统一起来了

评论

1 楼 PangSir 2014-08-26  

大爱，简直是大爱！！
困扰这么久以来的问题，虽然知道是CSS的问题，但一直调试不出来，新增兄弟的css文件后，一切搞掂，谢了！