當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框

發布時間：2025/3/15 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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,width: 300,renderTo: Ext.getBody(),defaults: {labelSeparator: "：",labelWidth: 80,width: 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>

效果圖：

轉載于:https://www.cnblogs.com/libingql/archive/2012/04/21/2460961.html

總結

以上是生活随笔為你收集整理的Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。