ExtJs中checkbox和radiobox的问题汇总

最新推荐文章于 2023-06-17 23:11:22 发布

falang

最新推荐文章于 2023-06-17 23:11:22 发布

阅读量156

点赞数

分类专栏： ExtJS 文章标签： EXT IE json CSS F#

ExtJS 专栏收录该内容

4 篇文章

订阅专栏

本文解决了ExtJs中Checkbox和Radiobox在IE浏览器下的显示问题，介绍了如何动态生成这些控件及其值，并提供了为Form中的Checkbox和Radiobox动态赋值的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个帖子主要记录我在使用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;   
    }    
});