extjs 复选框处理 博客分类： js EXTFirebug

      复选框checkBox,单选框radioBox。CheckboxGroup

      如果在formPanel中使用了checkBox,radioBox时，在提交表单时使用formPanel.getForm().submit()来提交数据时，如果单选框和复选框未选中时，则extjs是不会提交这些控件的。在postdata中根本就不存在这些控件的任何影子。可以通过firebug来查看提交的数据。

      

 

var checkboxgroup_temp = new Ext.form.CheckboxGroup({ 
    id:'myGroup', 
    xtype: 'checkboxgroup', 
    fieldLabel: '多选', 
    itemCls: 'x-check-group-alt', 
    // Put all controls in a single column with width 100% 
    columns: 1, 

 items : [{
             layout : 'column',
            items: [ 
        {boxLabel: 'Item 1', name: 'cb-col-1'}, 
        {boxLabel: 'Item 2', name: 'cb-col-2', checked: true}, 
        {boxLabel: 'Item 3', name: 'cb-col-3'} 
  ]
             },{
             layout : 'column',
                 items: [ 
        {boxLabel: 'Item 1', name: 'cb-col-1'}, 
        {boxLabel: 'Item 2', name: 'cb-col-2', checked: true}, 
        {boxLabel: 'Item 3', name: 'cb-col-3'} 
                  ]
            }]

}); 

 

 

myCheckboxGoup是一个Checkbox组件的集合,对每一个Checkbox项的访问，可能过
myCheckboxGroup.items.get(i) 定位到Checkbox 然后查看属性值 例如 myCheckboxGroup.items.get(i).inputValue


如果这种方法没有效果
  可以尝试用这样的方法
myCheckboxGroup.setValue('cb-col-1', true);//设置 name为cb-col-1 的checked为true 即表选中

 

 

 

 

 

var field_newspwap_3 = new Ext.form.FieldSet({
 title : '用户角色分配',
 autoHeight : true,
 collapsible : true,
 id : 'field_newspwap_3',
items : [{   
            layout : 'column',   
            defaults : {   
                hideLabels : true,   
                layout : 'form'  
            },   
            items : [{   
                columnWidth : .01  
            }, {   
                columnWidth : .33,   
                items : [new Ext.form.Checkbox({   
                    boxLabel : '计费系统',
                    name : 'userRole.roleIdStr',   
                    inputValue :10,   
                    checked : true  
                })]   
            }, {   
                columnWidth : .33,   
                items : [new Ext.form.Checkbox({   
                    boxLabel : '演示系统',   
                    name : 'userRole.roleIdStr',   
                    inputValue :11,   
                    checked : true   
                    //disabled : true  
                })]
            }, {   
                columnWidth : .33,   
                items : [new Ext.form.Checkbox({   
                    boxLabel : '风格',   
                    name : 'userRole.roleIdStr',   
                    inputValue :12,   
                    checked : true   
                  //  disabled : true  
                })]   
            }]   
        }] 

  

});

 'userRole.roleIdStr'

是映射你后台的数据类和属性。

后台得到的值是： 11, 12, 13

 提交上一数据JS

var frm_newspwap = new Ext.FormPanel({
	margins : '5 5 5 5',
	id : 'frm_newspwap',
	frame : true,
	title : '新增用户',
	labelAlign : 'left',
	labelWidth : 160,
	region : 'center',
	autoScroll : true,
	//bodyStyle:'overflow-x:auto;',
	items : [field_newspwap_3],
	buttonAlign : 'center',
    buttons: [{
	            text:'保存',
	            xtype : 'easyButton',
	            handler:function(){// 保存操作
				if (frm_newspwap.form.isValid() == false){
	    		    return;
	  		    }
	  		    frm_newspwap.form.submit({
	   		    url:'test/UserRole/save.do',
	   		    success:function(form,action){
	   		          Ext.MessageBox.alert('提示',action.result.msg);
			          grid_pag.doLoad(0);
	 		       },
	 		     scope:this,
	 		     failure:function(form,action){
	 		          Ext.MessageBox.alert('错误',action.result.msg);
	   		       }
	  		     })
	   		    }
	     }] 
});