extjs 4 checkboxgroup Panel的简单用法

Ext.require([
             'Ext.tree.*',
             'Ext.data.*',
             'Ext.window.MessageBox',
             'Ext.tip.*'
         ]);

Ext.onReady(function() {
/* new Ext.Window({ 
		title:"新增", 
		500, 
		height:400, 
		plain:true, 
		layout:"form", 
		labelWidth:55, 
		items:[{
			layout:"column", 
			baseCls:"x-plain", 
			style:"padding:5px", 
			items:[{ 
				columnWidth:.5, 
				layout:"form", 
				labelWidth:50, 
				baseCls:"x-plain", 
				items:[{ 
					xtype:"textfield", 
					fieldLabel:"姓名" 
					},{ 
						xtype:"textfield", 
						fieldLabel:"姓名" 
					},{ 
					xtype:"textfield", 
					fieldLabel:"姓名" 
					},{ 
					xtype:"textfield", 
					fieldLabel:"姓名" 
				}] 
			},{ 
				columnWidth:.5, 
				layout:"form", 
				items:[{ 
					id:"name", 
					xtype:"textfield", 
					fieldLabel:"照片", 
					inputType:"image", 
					250, 
					height:50 
				}] 
			}] 
		},{
			xtype:"textfield", 
			fieldLabel:" 证号" 
		}],
		buttons:[{text:"确定"},{text:"取消"}] 
}).show(); */

	 Ext.create('Ext.panel.Panel',{
		title:'panel',
		layout:'column',
		frame:true,
		height:300,
		1000,
		renderTo:Ext.getBody(),
		defaults: {
	           // labelAlign: 'top',
			baseCls:"x-plain",
			padding:'5,10,5,10'
	    },
		items:[{
			columnWidth:.2,
			frame:true,
			
			defaults: {
		        // labelAlign: 'top',
		        labelWidth:50
		    },
			items:[{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			}]
		},{
			columnWidth:.2,
			frame:true,
			items:[{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			}]
		},{
			columnWidth:.2,
			frame:true,
			
			items:[{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			}]
		},{
			columnWidth:.2,
			frame:true,
			
			items:[{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			}]
		},{
			columnWidth:.2,
			frame:true,
			
			items:[{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名3" 
			},{
			  	xtype:"textfield", 
				fieldLabel:"姓名4" 
			}]
		}]
		
	}); 
	
	 Ext.create('Ext.panel.Panel',{
			title:'panel',
			layout:'column',
			frame:true,
			height:300,
			1000,
			renderTo:Ext.getBody(),
			defaults: {
		           // labelAlign: 'top',
				baseCls:"x-plain",
				padding:'5,10,5,10'
		    },
			items:[{
				columnWidth:.2,
				frame:true,
				
				defaults: {
			        // labelAlign: 'top',
			        labelWidth:50,
			        height:20
			    },
				items:[{
				  	xtype:"checkbox",
				  	boxLabel:"姓名3"
				},{
					xtype:"checkbox",
				  	boxLabel:"姓名3"
				},{
					xtype:"checkbox",
				  	boxLabel:"姓名3"
				},{
					xtype:"checkbox",
				  	boxLabel:"姓名3"
				}]
			},{
				columnWidth:.2,
				frame:true,
				items:[{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				}]
			},{
				columnWidth:.2,
				frame:true,
				
				items:[{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				}]
			},{
				columnWidth:.2,
				frame:true,
				
				items:[{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				}]
			},{
				columnWidth:.2,
				frame:true,
				
				items:[{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名3" 
				},{
				  	xtype:"textfield", 
					fieldLabel:"姓名4" 
				}]
			}]
			
		}); 
	 
	 var myPanel = Ext.create('Ext.form.Panel', {
		    title: 'Checkbox Group',
		     850,
		    height: 125,
		    bodyPadding: 10,
		    renderTo: Ext.getBody(),
		    items:[{
		        xtype: 'checkboxgroup',
		        id:'mygroup',
		        fieldLabel: 'Two Columns',
		        columns: 6,
		        vertical: true,
		        items: [{
		            	vertical: false,
		            //	columnWidth:200,
		            	xtype: 'panel',
		            	baseCls:"x-plain",
		            	items:[{
		            		name:"moduleck",xtype: 'checkbox',boxLabel: 'Item 1', name: 'rb', inputValue: '111a' 
		            	},{
		            		name:"moduleck", xtype: 'checkbox',boxLabel: 'Item 1-2', name: 'rb', inputValue: '111b' 
		            	},{
		            		name:"moduleck",xtype:"checkbox",
						  	boxLabel:"姓名3"
		            	}
		            ]},
		            { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true },
		            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
		            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
		            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
		            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
		        ]
		    }]
	 });
	 Ext.create('Ext.Button', {
		    text: '得到被选中的节点',
		    renderTo: Ext.getBody(),
		    handler: function() {
		    	var myCheckboxGroup = Ext.getCmp('#mygroup');
		    	
		    	console.info('---'+myPanel.down('checkboxgroup').getId());
		    	console.info('---'+myPanel.down('checkboxgroup').fieldLabel);
		    	
		    	console.info('---+myPanel.query("checkbox"):'+myPanel.query("checkbox")[0].name);
		    	
		    	console.info('---+myPanel.query("checkbox[name=rb]")'+myPanel.query("checkbox[name=rb]")[0].name);
		    	var cks = myPanel.query("checkbox[name=rb]");
		    	for(var i=0;i<cks.length;i++){
		    		console.info("gg:"+cks[i].inputValue+","+cks[i].getValue());
		    		cks[i].setValue(true);
		    	}
		    	console.info('---'+myPanel.down('checkbox').name);
		    	console.info('---'+myPanel.down('checkbox').inputValue);
		    	
		    	return;
		    	console.info( Ext.query("#mygroup").length);
		    	console.info((Ext.query("#mygroup")[0]).getXType());
		    	console.info( (Ext.query("#mygroup")[0]).getId());
		    	
		    	return;
		    	  for (var i = 0; i < myCheckboxGroup.items.length; i++)    
		            {    
		                if (myCheckboxGroup.items.itemAt(i).checked)    
		                {  
		                	console.info(Ext.isEmpty(myCheckboxGroup.items.itemAt(i).name));
		                    alert();                    
		                }    
		            } 
		    }
	   });
	   
	 
});