- 浏览: 212236 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
henchong：
如果提示信息全是数字的话，是不会自动换行的，不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻：
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen：
楼主能解释下为啥要用air技术呢，是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren：
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子：
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
Ext提供的Checkbox与Radio，在控件同名成组时，例如将性别的男与女两个Radio控件都使用sex作为名称时，findField方法只能获取第一个控件，setValue也只能设置第一个控件，这样就造成了如果要使用Form的Load方式加载编辑数据或者用SetValues加载编辑数据时出现问题。要解决这个问题，第一种方法是定义名称不同的控件；第二种方法是控件名称相同，在加载编辑数据时手动处理控件状态。第一种方法对Checkbox问题不是太大，因为各Checkbox之间没关联。但是Radio就不同，彼此间是关联，例如性别选择男了，那女须为未选择状态，这个在名称相同时，会自动处理，不需要写多余代码，但是名称不同，则要通过check事件去修改其它控件的状态。第二种方法存在问题是，Checkbox同名，要获取第一个控件后的控件比较困难，要处理也困难。基于以上原因，笔者习惯的做法是Checkbox使用不同名的定义方法，Radio使用Ext官方论坛用户vtswingkid开发的Ext.ux.RadioGroup扩展代替。
Ext.ux.RadioGroup在的下载地址是：http://extjs.com/forum/showthread.php?t=23250。
Checkbox在定义时必须使用ColumnLayout，第一列的控件有标签，后续列的控件则隐藏标签。不然，会很难实现习惯的Checkbox对齐方式。Ext.ux.RadioGroup在扩展的同时已经处理好对齐问题了，所以不必象Checkbox那样使用ColumnLayout。
Checkbox的主要配置参数请看表1。
表1 Checkbox主要配置参数
配置参数
描述
boxLabel
在复选框后显示的文本
checked
值为true表示初始状态为已选，false则表示未选，默认值是false
disabled
值为true表示初始状态为禁止使用，false则表示可以使用，默认值是false
fieldLabel
控件标签
hideLabel
值为true表示隐藏标签，false则显示，默认值是true
labelSeparator
标签分隔符
inputValue
Checkbox的实际提交值。如果不设置该值，无论value设置为什么值，Checkbox提交值都为"on"，
msgTarget
错误信息显示位置，默认值是qtip，详细信息请看Form校验与错误信息显示一节
name
控件名称
readOnly
值为true则表示初始状态为只读，false则表示可写，默认值为false，不推荐使用该值设置只读，因为设置后不允许再修改，如果要设置只读属性，请参考本书第7章编辑控件只读插件一节
tabIndex
键盘tab键移动时的索引
Ext.ux.RadioGroup的主要配置参数请看表2。
表2 Ext.ux.RadioGroup主要配置参数
配置参数
描述
fieldLabel
控件标签
name
控件名称
horizontal
值为true则表示Radio选项水平排列，false则表示垂直排列，默认值为false
radios
Radio选项组成的数组
radios子项配置：value
Radio选项正式值
radios子项配置：checked
值为true则表示已选，false则表示未选，默认值是false
radios子项配置：boxLabel
在单选框后显示的文本
Checkbox与RadioGroup的使用方法请看例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug='true'>
<head>
<title>Checkbox与RadioGroup例子</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../lib/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<script type="text/javascript" src="../lib/ext/radiogroup.js"></script>
<script type="text/javascript" src="../lib/ext/locale/ext-lang-zh_CN.js"></script>
<style>
</style>
</head>
<body>
<h1 style="margin:20px 0px 0px 20px;">第4章 Checkbox与RadioGroup例子</h1>
<br />
<div style="padding-left:20px;">
<p>
<div id="form1"></div><br>
<div >执行操作：</div>
<textarea id='op' rows="10" style="width:800px;"></textarea>
</p>
<br />
</div>
<script>
var app={};
Ext.onReady(function(){
var frm = new Ext.form.FormPanel({
applyTo: "form1",
autoHeight: true,
width: 860,
height:300,
frame: true,
labelWidth:80,
labelSeparator:"：",
title:'Checkbox与RadioGroup例子',
items:[
{layout:'column',border:false,items:[
{columnWidth:.5,layout: 'form',border:false,items: [
{xtype:'fieldset',title:'控件名不同',height:110,items:[
{layout:'column',border:false,items:[
{columnWidth:.5,layout: 'form',border:false,items: [
{xtype:'checkbox',fieldLabel:'角色',boxLabel:'系统管理员',name:'role1',anchor:'100%'}
]},
{columnWidth:.25,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'经理',name:'role2',anchor:'100%'}
]},
{columnWidth:.25,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'普通用户',name:'role3',anchor:'100%'}
]}
]},
{layout:'column',border:false,items:[
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'button',text:'选择"系统管理员"',scope:this,
handler:function(){
frm.form.findField('role1').setValue('true');
Ext.get('op').dom.value+="执行：frm.form.findField('role1').setValue('true')\n";
}
}
]},
{columnWidth:.4,layout: 'form',border:false,items: [
{xtype:'button',text:'不选择"系统管理员"',scope:this,
handler:function(){
frm.form.findField('role1').setValue('false');
Ext.get('op').dom.value+="执行：frm.form.findField('role1').setValue('false')\n";
}
}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'button',text:'选择"经理"',scope:this,
handler:function(){
frm.form.findField('role2').setValue('true');
Ext.get('op').dom.value+="执行：frm.form.findField('role2').setValue('true')\n";
}
}
]}
]},
{layout:'column',border:false,items:[
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'button',text:'不选择"经理"',scope:this,
handler:function(){
frm.form.findField('role2').setValue('false');
Ext.get('op').dom.value+="执行：frm.form.findField('role2').setValue('false')\n";
}
}
]},
{columnWidth:.4,layout: 'form',border:false,items: [
{xtype:'button',text:'选择"普通用户"',scope:this,
handler:function(){
frm.form.findField('role3').setValue('true');
Ext.get('op').dom.value+="执行：frm.form.findField('role3').setValue('true')\n";
}
}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'button',text:'不选择"普通用户"',scope:this,
handler:function(){
frm.form.findField('role3').setValue('false');
Ext.get('op').dom.value+="执行：frm.form.findField('role3').setValue('false')\n";
}
}
]}
]}
]}
]},
{columnWidth:.5,bodyStyle:'padding: 0 0 0 5px',layout:'form',border:false,items: [
{xtype:'fieldset',title:'控件名相同',height:110,items:[
{layout:'column',border:false,items:[
{columnWidth:.5,layout: 'form',border:false,items: [
{xtype:'checkbox',fieldLabel:'角色2',boxLabel:'系统管理员',name:'role',anchor:'90%',inputValue:"系统管理员"}
]},
{columnWidth:.25,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'经理',name:'role',anchor:'90%',inputValue:"经理"}
]},
{columnWidth:.25,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'普通用户',name:'role',anchor:'90%',inputValue:"普通用户"}
]}
]},
{layout:'column',border:false,items:[
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'button',text:'findField("role")',scope:this,
handler:function(){
var obj=frm.form.findField('role');
Ext.get('op').dom.value+="执行：var obj=frm.form.findField('role')\n"+
'obj.inputValue：'+obj.inputValue+'\n';
}
}
]},
{columnWidth:.4,layout: 'form',border:false,items: [
{xtype:'button',text:"setValue('true')",scope:this,
handler:function(){
frm.form.findField('role').setValue('true');
Ext.get('op').dom.value+="执行：frm.form.findField('role').setValue('true')\n";
}
}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'button',text:"setValue('false')",scope:this,
handler:function(){
frm.form.findField('role').setValue('false');
Ext.get('op').dom.value+="执行：frm.form.findField('role').setValue('false')\n";
}
}
&n
发表评论
-
extjs+air开发
2009-06-24 21:41 2992一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1834该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 753当使用了ExtJs后，脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1154CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1164其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1615使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4559巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1544tab在ext里很常用，在点开N个tab后，是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3252<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1177ext树形菜单加上右键菜单是不是很酷，ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2554page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1549本实例将在带分页的表格基础上进行扩展，增加搜索功能。由于本实例 ... -
带分页的表格
2009-01-09 13:43 1011主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2543<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2854<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 810对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类，构建方便的grid操作
2009-01-09 13:13 1411在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1945<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1780ext提供的树本身就有拖 ... -
可直接编辑节点的tree
2009-01-09 12:03 1681其实代码并不是很复杂，只是在原有的树形添加一个TreeEdit ...
相关推荐
NULL 博文链接：https://conkeyn.iteye.com/blog/1581051
本文介绍了Android中如何使用RadioGroup和RadioButton，对比了RadioButton和CheckBox的区别，并实现了自定义的RadioGroup中被选中RadioButton的变更监听事件
界面控件之选项组件(RadioGroup和CheckBox)--代码,Android开发学习26,博客主页: http://blog.csdn.net/ypist.
好看的单选框（radiogroup）和多选框（checkbox），效果可以在我的博客里看到：https://blog.csdn.net/wy313622821/article/details/108202189，希望大家能喜欢
RadioGroup RadioButton CheckBox www.mars-droid.com/Android开发视频教程 代码 源码 mars老师讲课 android 视频源码 Activity_07（在此特别感谢mars的无私奉献，此代码为跟随视频边学边做的）
C#的winform是没有webform的RadioButtonList和CheckBoxList这两个控件的。要实现从数据库取出数据后动态生成N个RadioButton和CheckBox并获取选中项目的值，请看本例。思路很简单，有问题请指出，相互学习共同进步，...
本次实验中主要是学习如何使用RadioGroup，CheckBox，RadioButton和Toast这几个控件，android UI开发中也会经常用到他们
Android控件简单使用，AoutCompleTextView、MultiAoutCompleTextView、ToggleButton、CheckBox、RadioGroup等控件
重写 代码如下: //解决...field){ this.items.each(function(f){ if(f.isXType(‘radiogroup’)||f.isXType(‘checkboxgroup’)){ f.items.each(function(c){ if(c.isFormField && (c.dataIndex == id || c.id ==
得多行显示要选的内容item，常规做法使用RadioGroup加上RadioButton来实现，但是前提是我们知道所要选择的item个数，如果碰到这么一种情况，所给出的item数量不确定，也就是从后台服务器中获取，有多少显示多少？...
雾山的Anrdoid学习笔记---CheckBox，RadioGroup&RadioButton的配套资源http://blog.csdn.net/tt75281920/article/details/26248451
Android UI控件集合，包括Button,TextView,EditView,CheckBox,RadioGroup,Spinner,AutoCompleteTextView,DatePicker,TimePicker,ProgressBar,SeekBar,RatingBar,ImageView,ImageButton,ImageSwicrher,Gallery,...
Android中布局属性的简单介绍，LinearLayout,RelativeLayout ,TableLayout ,4.AbsoluteLayout ,5.FrameLayout 布局控件TextView ，Edittext ，Button ，Shape ，CheckBox，RadioGroup，Spinner，TimePicker，...
AndriodSituationRadio-CheckBox RadioGroup CheckBox事件
初学者可以参考下，比较基础的案例，包括Button,TextView,EditView,CheckBox,RadioGroup,Spinner,DatePicker,TimePicker,ProgressBar,SeekBar,ImageView,ImageButton,GridView,TabView 等。
react-ui-icheck 使用React构建的iCheck可定制复选...以使用Input和Label组件删除了refs用法，以遵循“请勿滥用引用”指南引入了类似于RadioGroup CheckboxGroup 为RadioGroup引入了checkboxWrapClassName和checkboxWra
新浪微博源码这里有 使用RadioGroup来自定义TabHost CheckBox逻辑使用 全选单选取消 正则表达式 Span的使用
http://blog.csdn.net/yuankundong/article/details/50774294