extjs复选框和单按钮

界面：

1、输入框代码：

var batchUseMaintainProjectTypeField= { xtype:'f-checkboxgroup',fieldLabel: '维修项目类型',             columns: 4, //设置没四个选项一行

        id:'maintainProjectType', 
            allowBlank: false, items:[ 
               {boxLabel: '电梯', name: 'maintainProjectType',inputValue: '电梯'},               

               {boxLabel: '水管', name: 'maintainProjectType',inputValue: '水管'},

               {boxLabel: '燃气管道', name: 'maintainProjectType',inputValue: '燃气管道'}           

               {boxLabel: '内/外墙', name: 'maintainProjectType',inputValue: '内/外墙'},         

               {boxLabel: '招牌/指示牌', name: 'maintainProjectType',inputValue: '招牌/指示牌'},         {boxLabel: '监控', name: 'maintainProjectType',inputValue: '监控'},
               {boxLabel: '消防管网', name: 'maintainProjectType',inputValue: '消防管网'},

               {boxLabel: '可视对讲系统', name: 'maintainProjectType',inputValue: '可视对讲系统'},         {boxLabel: '电子防盗', name: 'maintainProjectType',inputValue: '电子防盗'},
               {boxLabel: '门禁', name: 'maintainProjectType',inputValue: '门禁'},

               {boxLabel: '停车场/车库', name: 'maintainProjectType',inputValue: '停车场/车库'},         {boxLabel: '雨棚', name: 'maintainProjectType',inputValue: '雨棚'},
               {boxLabel: '公共卫生间', name: 'maintainProjectType',inputValue: '公共卫生间'},         {boxLabel: '景观维护', name: 'maintainProjectType',inputValue: '景观维护'},

               {boxLabel: '路面维修', name: 'maintainProjectType',inputValue: '路面维修'},
               {boxLabel: '排污系统维修', name: 'maintainProjectType',inputValue: '排污系统维修'},         {boxLabel: '煤气维修', name: 'maintainProjectType',inputValue: '煤气维修'},

               {boxLabel: '发电机', name: 'maintainProjectType',inputValue: '发电机'},
               {boxLabel: '*空调', name: 'maintainProjectType',inputValue: '*空调'},

               {boxLabel: '配电房', name: 'maintainProjectType',inputValue: '配电房'},

               {boxLabel: '公共健身场地', name: 'maintainProjectType',inputValue: '公共健身场地'},
               {boxLabel: '对讲门铃', name: 'maintainProjectType',inputValue: '对讲门铃'},

               {boxLabel: '其他', name: 'maintainProjectType',inputValue: '其他'}],
                                          listeners:{
                                              scope: this,
                                              'change':function(){//当‘其他’被勾选时是不能在勾选其他的复选框 
                                                  //    2，收集复选框的值  
                                                    var cbitems = Ext.getCmp('maintainProjectType').items;  
                                                    for (var i = 0; i < cbitems.length; i++) {  
                                                        if (cbitems.get(i).checked) { 
                                                            if(cbitems.get(i).inputValue=='其他'){
                                                                for(var j = 0; j < cbitems.length; j++){
                                                                    if(cbitems.get(j).checked && cbitems.get(j).inputValue!='其他'){
                                                                        cbitems.get(j).setValue(false);
                                                                    }
                                                                }
                                                                
                                                            }
                                                        }    
                                                    }
                                                    
                                              },
                                              'load':function(value){
                                              // 勾选复选框
                                                 var checkboxstore =value.split(",");//后台数据用逗号分隔，这里进行切割
                                                 var checkboxgroup =Ext.getCmp('maintainProjectType').items;                                                    //form中 checkboxgroup的位置
                                                   for(var i=0;i<checkboxgroup.items.length;i++){ //循环比对 如果相同就设置为true
                                                       for(var j=0;j<checkboxstore.length;j++){
                                               if(checkboxgroup.items.get(i).getRawValue()==checkboxstore[j]){
                                                               checkboxgroup.items.get(i).setValue(true);
                                                           }
                                                       }
    
                                                   }
                                            // formPanel.doLayout(); //重新调整版面布局
                                              }
                                            
                                          }
                                        };

2、自定义输入框f-checkboxgroup

Ext.app.CheckboxGroup=Ext.extend(Ext.form.CheckboxGroup,{
    initComponent : function(){
        Ext.app.CheckboxGroup.superclass.initComponent.call(this);                                            
    },
    getName: function() {
        return this.items.first().getName();
    }
});
Ext.reg('f-checkboxgroup', Ext.app.CheckboxGroup);

后台保存处理数据

//add by czp 20161014 
        String[] maintainProject_Type=pv("maintainProjectType");
        String maintainProjectType="";
        for(int i=0; i<maintainProject_Type.length; i++){
            if(i!=maintainProject_Type.length-1){
                maintainProjectType+=maintainProject_Type[i]+',';
            }else{
                maintainProjectType+=maintainProject_Type[i];
            }
            
        }
        e.setMaintainProjectType(maintainProjectType);

这是PV（）方法

public String[] pv(String paramName){
        //判断是否为空
return request.getParameterValues(paramName) == null ? null :  request.getParameterValues(paramName);
    }
    

3、单选框

var batchUseInternalFlagField ={xtype: 'f-radiogroup',fieldLabel: '收款银行账户', id:'internalFlag',allowBlank: false, items: [
                                      {boxLabel: '外行账户', name: 'internalFlag', inputValue: '0', checked: true},
                                      {boxLabel: '本行账户', name: 'internalFlag', inputValue: '1'}]
                                  };

4、自定义输入框f-radiogroup

Ext.app.RadioGroup = Ext.extend(Ext.form.RadioGroup, {
    initComponent : function(){
        Ext.app.RadioGroup.superclass.initComponent.call(this);                                            
    },
    getName: function() {
        return this.items.first().getName();
    }
});
Ext.reg('f-radiogroup', Ext.app.RadioGroup);