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(); } } } }); });
posted on 2015-08-11 09:40 xunianchong 阅读(504) 评论(0) 编辑 收藏 举报