日期:2014-05-16 浏览次数:20726 次
<html> <head> <title>04.form</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var form = new Ext.form.FormPanel({ labelAlign: 'right', title: 'form', labelWidth: 50, frame:true, url: 'form2.jsp', width: 280, items: [ {//单选按钮组 xtype: 'fieldset', title: '单选', autoHeight:true, defaultType: 'radio', hideLabels: true, items: [ { boxLabel: '单选一', name: 'R1', inputValue: '1', checked: true}, { boxLabel: '单选二', name: 'R1', inputValue: '2' }, { boxLabel: '单选三', name: 'R1', inputValue: '3' } ] }, {//多选按钮组 xtype: 'fieldset', title: '多选', autoHeight: true, //defaultType: 'checkbox', 可以设置默认,也可以分别设置xtype属性 hideLabels: true, items: [ { boxLabel: '多选一', name: 'C1', id: 'cbox1', inputValue: '1', xtype: 'checkbox', checked: true }, { boxLabel: '多选二', name: 'C1', id: 'cbox2', inputValue: '2', xtype: 'checkbox' }, { boxLabel: '多选三', name: 'C1', id: 'cbox3', inputValue: '3', xtype: 'checkbox' } ] }], buttons: [{ text: '多选getGroupValue', handler: function() { //Ext.form.Checkbox 的取值比较麻烦,下面是取值的方法之一 Ext.Msg.alert('信息', "多选按钮第一项的选择状态为: " + Ext.get("cbox1").dom.checked); } }, { text: '单选getGroupValue', handler: function() { Ext.Msg.alert('信息', form.getForm().findField('R1').getGroupValue()); } }] }); form.render("form"); }); </script> </head> <body> <div id="form" style="margin:100px;"></div> </body></html>