日期:2014-05-16  浏览次数:20297 次

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()生成

   1. 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. });  
?