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

});