Extjs Checkbox

ExtJs checkbox radiobox 问题 汇总

文章分类:Web前端

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

这样CheckboxGroup数据就可以从数据库中动态加载过来了  
-------------------------------------------------------------------------------- 对于类型是checkboxgroup的数据，数据库中保存数据的格式是value1,value2...valueN，其中1~N的数据有可能不存在，如果选中则存在，最后拼接成一个串。  
在Ext中，通过Record对象向FormPanel中的内置对象BasicForm加载数据时，采用的是setValues方法，而setValues第一步要通过Record中定义的name使用findField方法找到表单元素，遗憾的是，继承了Field的checkboxgroup组件并不能正确的通过getName返回自身引用，所以，需要对getName方法进行重写，此外，为了适应我们采用的数据格式，对于该组件的setValue（被setValues调用）和getValue（获取到已加工的数据，此事后话）也要进行重写。故而对于形如：  

{
   xtype: 'checkboxgroup',
   name: 'biztype',
   width: 220,
   columns: 3,
   fieldLabel: '业务类别',
   items: [
       {boxLabel: '类别1', inputValue: '01'},
       {boxLabel: '类别2', inputValue: '02'},
       {boxLabel: '类别3', inputValue: '03'},
       {boxLabel: '类别4', inputValue: '04'}
       ]
 }

的checkboxgroup定义，需重写类如下：  

Ext.override(Ext.form.CheckboxGroup,{
    //在inputValue中找到定义的内容后，设置到items里的各个checkbox中
    setValue : function(value){
        this.items.each(function(f){
            if(value.indexOf(f.inputValue) != -1){
                f.setValue(true);
            }else{
                f.setValue(false);
            }
        });
    },
    //以value1,value2的形式拼接group内的值
    getValue : function(){
        var re = "";
        this.items.each(function(f){
            if(f.getValue() == true){
                re += f.inputValue + ",";
            }
        });
        return re.substr(0,re.length - 1);
    },
    //在Field类中定义的getName方法不符合CheckBoxGroup中默认的定义，因此需要重写该方法使其可以被BasicForm找到
    getName : function(){
        return this.name;
    }
});

2 通过内置对象basicForm的getValues方法可以获取到一个form的完整json数据，但遗憾的事，这里取到的是dom的raw数据，类似emptyText的数据也会被返回，而Field的getValue方法不存在这个问题，所以如果想要返回一个非raw的json集合，可以给formpanel添加如下方法：  

getJsonValue:function(){
    var param = '{';
    this.getForm().items.each(function(f){
        var tmp = '"' + f.getName() + '":"' + f.getValue() + '",';
        param +=  tmp;
    });
    param = param.substr(0,param.length - 1) + '}';
    return param;
}