extjs 4 checkboxgroup Panel的简单用法

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

Ext.onReady(function() {
/* new Ext.Window({
		title:"新增",
		width: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",
					width:250,
					height:50
				}]
			}]
		},{
			xtype:"textfield",
			fieldLabel:" 证号"
		}],
		buttons:[{text:"确定"},{text:"取消"}]
}).show(); */

	 Ext.create('Ext.panel.Panel',{
		title:'panel',
		layout:'column',
		frame:true,
		height:300,
		width: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,
			width: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',
		    width: 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();
		                }
		            }
		    }
	   });

});