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