Ext表单组件之checkbox
2024-04-16 11:33:29
[img]http://lovebeyond.iteye.com/upload/attachment/132698/06745dfa-42bf-3e1d-a391-5782981dfe63.jpg[/img]
这个组件都比较简单，要配置的参数很少
radio和checkbox设置基本一样，就几个属性(checked,handler,boxLabel,inputValue),俩个的配置一样的可以比较着进行学习，checkboxgroup和radiogroup设置也是完全一样的，他们的属性主要包括:columns和vertical
运行代码就知道有多么容易了
checkbox.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>register.html</title> <style type="text/css"> body{background-color:#777777} #form-cb{width: 700px;margin-left: auto;margin-right: auto;} </style> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../Ext/ext-all.js"></script> <script type="text/javascript" src="checkbox.js"></script> </head> <body> <div id="form-cb"></div> </body></html>checkbox.js
Ext.onReady(function() { var form = new Ext.FormPanel({ title : 'checkbox应用', width : 600, autoHeight : true, renderTo : 'form-cb', bodyStyle : "padding:2px", border : false, frame : true, items : [{ autoHeight : true, xtype : 'fieldset', collapsible :true, collapsed :true, layout : 'form', title:'复选框', items:[{ xtype : 'checkbox', fieldLabel : '复选框', inputValue : '1',//选中值 checked :true,//是否被选中 handler :function(){Ext.Msg.alert('提示','你被选中了')}, name : 'b1', boxLabel : 'box1' },{ xtype : 'checkboxgroup', fieldLabel : '复选组autolayout', items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'gb' },{ inputValue : 'dance', boxLabel : '跳舞', checked :true,//是否被选中 name : 'gb' },{ inputValue : 'swing', boxLabel : '游泳', name : 'gb' }] },{ xtype : 'checkboxgroup', fieldLabel : '复选组单列layout', columns: 1,//设置显示的列数 items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'gb1' },{ inputValue : 'dance', boxLabel : '跳舞', name : 'gb1' },{ inputValue : 'swing', checked :true,//是否被选中 boxLabel : '游泳', name : 'gb1' }] },{ xtype : 'checkboxgroup', fieldLabel : '复选组多列layout', columns: 2,//设置显示的列数 items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'gb2' },{ inputValue : 'dance', checked :true,//是否被选中 boxLabel : '跳舞', name : 'gb2' },{ inputValue : 'swing', checked :true,//是否被选中 boxLabel : '游泳', name : 'gb2' },{ inputValue : 'play', boxLabel : '打球', name : 'gb2' },{ inputValue : 'film', checked :true,//是否被选中 boxLabel : '看电影', name : 'gb2' }] },{ xtype : 'checkboxgroup', fieldLabel : '复选组多列layout(vertical=true)', columns: 2,//设置显示的列数 vertical :true,//表示组件分布方向是否为垂直方向，默认为false即水平方向 items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'gb3' },{ inputValue : 'dance', checked :true,//是否被选中 boxLabel : '跳舞', name : 'gb3' },{ inputValue : 'swing', checked :true,//是否被选中 boxLabel : '游泳', name : 'gb3' },{ inputValue : 'play', boxLabel : '打球', name : 'gb3' },{ inputValue : 'film', checked :true,//是否被选中 boxLabel : '看电影', name : 'gb3' }] }] },{ autoHeight : true, xtype : 'fieldset', collapsible :true, collapsed :false, title:'单选框', layout : 'form', items:[{ xtype : 'radio', fieldLabel : '单选框', inputValue : '1',//选中值 checked :true,//是否被选中 handler :function(){Ext.Msg.alert('提示','你被选中了')}, name : 'b1', boxLabel : 'box1' },{ xtype : 'radiogroup', fieldLabel : '单选组autolayout',
items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'rb' },{ inputValue : 'dance', boxLabel : '跳舞', checked :true,//是否被选中 name : 'rb' },{ inputValue : 'swing', boxLabel : '游泳', name : 'rb' }] },{ xtype : 'radiogroup', fieldLabel : '单选组单列layout', columns: 1,//设置显示的列数 items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'rb1' },{ inputValue : 'dance', boxLabel : '跳舞', name : 'rb1' },{ inputValue : 'swing', checked :true,//是否被选中 boxLabel : '游泳', name : 'rb1' }] },{ xtype : 'radiogroup', fieldLabel : '单选组多列layout', columns: 2,//设置显示的列数 items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'rb2' },{ inputValue : 'dance', checked :true,//是否被选中 boxLabel : '跳舞', name : 'rb2' },{ inputValue : 'swing', checked :true,//是否被选中 boxLabel : '游泳', name : 'rb2' },{ inputValue : 'play', boxLabel : '打球', name : 'rb2' },{ inputValue : 'film', checked :true,//是否被选中 boxLabel : '看电影', name : 'rb2' }] },{ xtype : 'radiogroup', fieldLabel : '单选组多列layout(vertical=true)', columns: 2,//设置显示的列数 vertical :true,//表示组件分布方向是否为垂直方向，默认为false即水平方向 items :[{ inputValue : 'song', boxLabel : '唱歌', name : 'rb3' },{ inputValue : 'dance', checked :true,//是否被选中 boxLabel : '跳舞', name : 'rb3' },{ inputValue : 'swing', checked :true,//是否被选中 boxLabel : '游泳', name : 'rb3' },{ inputValue : 'play', boxLabel : '打球', name : 'rb3' },{ inputValue : 'film', checked :true,//是否被选中 boxLabel : '看电影', name : 'rb3' }] }] }], buttons : [{ text : '提交', scope : this, handler : function() { alert(Ext.encode(form.form.getValues())); } }, { text : '重置' }] }) })源代码在下面，IE7.0和FF都没问题
Ext表单组件之checkbox相关推荐
- Ext表单组件之textField
先看效果: [img]http://lovebeyond.iteye.com/upload/attachment/132579/697c9555-5ff5-3b95-b6e4-a646c7d099ca ...
- extjs 提交表单给php,JavaScript_Extjs学习笔记之二 初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二 初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
- 《uni-app》表单组件-Checkbox组件
本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组 ...
- 小程序七：组件之表单组件
button 按钮组件. 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样式类型,有效值prima ...
- 《uni-app》表单组件-form表单
本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组件-form表单 ...
- 微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
最新文章
- php扩展模块安装-lamp
- R语言ggplot2可视化使用ggplot2::ggsave函数和gridextra::marrangegrob函数将多个可视化结果保存在pdf文件中
- python3 安装包 源码包 下载慢问题 解决方法
- C语言宏的副作用的简单实例
- Python文件的读写操作
- 鸿蒙系统sp3什么意思,怎么看电脑系统是哪个版本的?例如SP2 SP3?
- Oracle DG常用视图与运维护常用操作
- 摩托罗拉G7系列发布：G7 Plus还有中国红配色
- 截取文件最后10行_10 行 Python 代码自动清理电脑内重复文件，解放双手
- 测试网站集群节点的页面访问是否正常
- linux7不能使用yum,CentOS7.6无法使用yum命令,无法更新解决方法
- PYTHON之路(九)
- 新著作计划：《水利水电工程施工导流 水力计算与.NET编程》
- 计算机进入屏保快捷键,电脑如何快速进入屏保
- MATLAB中plot函数的用法
- 一些大牛的博客推荐，排名不分先后
- 我的谷歌变成了金色传说！
- 2021-07-12测绘资质新标准和旧标准改革内容
- Python数据可视化seaborn(五) -- 分类统计图
- php kestrel,转载 kestrel php 讯息队列