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>
效果图:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述