ExtJs中checkbox和radiobox的问题汇总

feidaozhou

这个帖子主要记录我在使用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 function getData(){   var conn = new Ext.data.Connection();   conn.request({       url: '',       success: function(response) {           itemArray = Ext.util.JSON.decode(response.responseText);          Ext.getCmp('id').items=itemArray;          }       });  }
在这里通过Connection从后台获取json并将值赋给checkboxgroup
json的格式如下
[{id:'id',boxLabel:'boxLabel',name:'name'},...]
3、checkbox和radiobox在Form中的赋值问题
由于Ext原来的checkbox和radiobox是无法动态赋值的，通过添加下面代码修复
Ext.override(Ext.form.BasicForm,{       findField : function(id){                   var field = this.items.get(id);        if(!field){               this.items.each(function(f){                   if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){                       f.items.each(function(c){                           if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){                               field = c;                               return false;                           }                       });                   }                                                      if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){                       field = f;                       return false;                   }               });           }           return field || null;       }    });