ExtJs中checkbox和 radiobox的问题汇总

最新推荐文章于 2022-06-17 17:51:18 发布

lr5200

最新推荐文章于 2022-06-17 17:51:18 发布

阅读量2.1k

点赞数

分类专栏： EXT 文章标签： extjs function json css 数据库 table

本文链接：https://blog.csdn.net/lr5200/article/details/6606455

版权

EXT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客汇总了使用ExtJs时遇到的checkbox和radiobox问题，包括在IE下纵向显示的CSS解决方案，动态生成checkbox和radiobox的方法，以及在Form中为它们动态赋值的技术细节。

摘要由CSDN通过智能技术生成

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

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

Js代码 {

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

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

Js代码

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