EXTJS CHECKBOX 横排显示问题

转载自：http://hi.baidu.com/dslsunmoon/blog/item/58017c8cff0036ea503d9267.html

这几天因为有个页面要用到extjs 的checkbox，查了一些资料，最后觉得用checkboxgroup比较方便，checkboxgroup有一个属性，columns属性可以指定一行显示多少个checkbox，我指定了8个，发现显示出问题了，标签属性变成了纵向显示了，见图1.。

上网查了一些资料，后来有高手指点，说只要在样式文件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;}

然后在checkboxgroup的itemCls属性指定为'x-form-check-group',这样显示问题就搞定了！见图2

 

下面是checkboxgroup的相关代码，仅供参考！

{
     xtype:'fieldset',
     title: '省·直辖市',
     collapsible :true,
     autoHeight: true,
     layout: 'form',
     items: [
     {
      width:'100%',
      autoHeight:true,
      id:'checkboxall',
      items: [
       new Ext.form.Checkbox({boxLabel: '全选', name: 'cb-sf-all',handler:onSelectAll})
      ]
     },{
      width:'100%',
      autoHeight:true,
      layout: 'column',
      xtype: 'checkboxgroup',
      id:'checkboxgroup',
      hideLabel:true,
      anchor: '100%',
      fieldLabel: '省份',
      itemCls: 'x-form-check-group',
      columns: 8,
      items: [
       {boxLabel: '北京', name: 'cb-horiz-01',inputValue:'01'},
       {boxLabel: '天津', name: 'cb-horiz-02',inputValue:'02',checked: true},
       {boxLabel: '上海', name: 'cb-horiz-03',inputValue:'03'},
       {boxLabel: '重庆', name: 'cb-horiz-04',inputValue:'04'},
       {boxLabel: '河北', name: 'cb-horiz-05',inputValue:'05'},
       {boxLabel: '山西', name: 'cb-horiz-06',inputValue:'06',checked: true},
       {boxLabel: '内蒙古', name: 'cb-horiz-07',inputValue:'07'},
       {boxLabel: '辽宁', name: 'cb-horiz-08',inputValue:'08'},
       {boxLabel: '吉林', name: 'cb-horiz-09',inputValue:'09'},
       {boxLabel: '黑龙江', name: 'cb-horiz-10',inputValue:'10'},
       {boxLabel: '江苏', name: 'cb-horiz-01',inputValue:'11'},
       {boxLabel: '浙江', name: 'cb-horiz-02',inputValue:'12',checked: true},
       {boxLabel: '安徽', name: 'cb-horiz-03',inputValue:'13'},
       {boxLabel: '福建', name: 'cb-horiz-04',inputValue:'14'},
       {boxLabel: '江西', name: 'cb-horiz-05',inputValue:'15'},
       {boxLabel: '山东', name: 'cb-horiz-06',inputValue:'16',checked: true},
       {boxLabel: '河南', name: 'cb-horiz-07',inputValue:'17'},
       {boxLabel: '湖北', name: 'cb-horiz-08',inputValue:'18'},
       {boxLabel: '湖南', name: 'cb-horiz-09',inputValue:'19'},
       {boxLabel: '广东', name: 'cb-horiz-10',inputValue:'20'},
       {boxLabel: '广西', name: 'cb-horiz-07',inputValue:'21'},
       {boxLabel: '海南', name: 'cb-horiz-08',inputValue:'22'},
       {boxLabel: '四川', name: 'cb-horiz-09',inputValue:'23'},
       {boxLabel: '贵州', name: 'cb-horiz-10',inputValue:'24'},
       {boxLabel: '云南', name: 'cb-horiz-09',inputValue:'25'},
       {boxLabel: '西藏', name: 'cb-horiz-10',inputValue:'26'},
       {boxLabel: '陕西', name: 'cb-horiz-09',inputValue:'27'},
       {boxLabel: '甘肃', name: 'cb-horiz-10',inputValue:'28'},
       {boxLabel: '青海', name: 'cb-horiz-10',inputValue:'29'},
       {boxLabel: '宁夏', name: 'cb-horiz-10',inputValue:'30'},
       {boxLabel: '新疆', name: 'cb-horiz-10',inputValue:'31'},
       {boxLabel: '香港', name: 'cb-horiz-10',inputValue:'32'},
       {boxLabel: '澳门', name: 'cb-horiz-10',inputValue:'33'},
       {boxLabel: '台湾', name: 'cb-horiz-11',inputValue:'34'}
      ]
     }]
    }

//全选按钮事件
function onSelectAll()
{
   var group = Ext.getCmp('checkboxgroup');
   var length = group.items.getCount();
   var all;
   if (this.checked==true){
    all = true;
   }else
   {
    all = false;
   }
   for (i = 0;i<length;i++){
    group.items.get(i).setValue(all);
   }
}

//保存按钮事件
function onSave()

{
   var group = Ext.getCmp('checkboxgroup');
   var length = group.items.getCount();
   var sltvalue='';
   for (i=0;i<length;i++){
    if (group.items.get(i).checked==true){
     sltvalue+=','+group.items.get(i).inputValue;
    }
   }

alert("sltvalue = "+sltvalue.substring(1,sltvalue.length));
   //Ext.getCmp('selectedshengfen').setValue(sltvalue.substring(1,sltvalue.length));
}

=================================================

补充：今天发现EXTJS2.0不支持xtype='checkboxgroup'，要2.2以上才能支持CheckboxGroup，如果你的extjs是2.0的话，又想要用CheckboxGroup，可以把2.2以上版本中的CheckboxGroup.js拷贝到工程的ext相应的resources，然后在该页面引用CheckboxGroup.js，就可以用啦。此外，我还发现以上的代码中，extjs2.0 不支持checkbox事件handler方法，必须要用listeners(侦听)才能响应，代码修改如下：

new Ext.form.Checkbox({boxLabel: '全选', name: 'cb-sf-all',
           listeners : {
            'check' : onSelectAll
            }
           })