1、Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目
| 配置项 | 类型 | 说明 |
|---|---|---|
| boxLabel | String | 紧靠复选框的文字描述 |
| boxLabelAlign | String |
设置复选框关联标签的位置， 有效值包括：“before”和“after”，默认为“after” |
| checked | Boolean | 设置复选框默认是否被选中，默认为false |
| handler | Function |
设置当选中状态发生变化时的处理函数， 传入参数为： checkbox：Ext.form.Checkbox复选框组件 checked:Boolean新的选中状态 |
| inputValue | String | 提交值，默认为“on” |
| scope | Object | 设置handler处理函数的作用范围 |
| uncheckedValue | String | 设置当复选框未选中时向后台提交的值，默认为undefined |
2、Ext.form.field.CheckBox和Ext.form.field.Radio示例
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.form.field.CheckBox和Ext.form.field.Radio示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { new Ext.form.Panel({ title: "Ext.form.field.CheckBox和Ext.form.field.Radio示例", bodyStyle: "padding:5", frame: true, height: 150, 300, renderTo: Ext.getBody(), defaults: { labelSeparator: "：", labelWidth: 80, 200, labelAlign: "left" }, items: [{ xtype:"radio", name:"sex", fieldLabel:"性别", boxLabel:"男" }, { xtype: "radio", name: "sex", fieldLabel: "性别", boxLabel: "女" }, { xtype: "checkboxfield", name: "swim", fieldLabel: "爱好", boxLabel: "游泳" }, { xtype: "checkboxfield", name: "walk", fieldLabel: "爱好", boxLabel: "散步" }] }); }); </script> </head> <body> </body> </html>
效果图：
