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