y1d2y3xyz
- 浏览: 253102 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
dhunter：
mongodb 需要auth 怎么加呢？
linux下mongodb+nodejs环境搭建 -
y1d2y3xyz：
xie666 写道html.push('<td alig ...
javascript DOM操作性能-----创建DOM -
xie666：
html.push('<td align="c ...
javascript DOM操作性能-----创建DOM -
轩辕丶菓菓：
bushkarl 写道那我后台用struts2，我的name一 ...
Ext表单之loadRecord用法详解 -
heikediguo：
这样不会按照你想要的顺序加载。
加载JS文件
这个组件都比较简单，要配置的参数很少
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都没问题
分享到：
发表评论
-
Extjs源码之--Ext事件机制/继承关系
2011-10-16 16:36 1825Extjs源码之--Ext.lib.Event 中分析了EX ... -
Extjs源码之--Ext.lib.Event(事件的简单封装)
2011-10-16 11:34 2617这个对象是对事件的基础封装，在实际使用中，我们往往不从这里去 ... -
Extjs源码之--Ext.lib.Dom(Dom的基本封装)
2011-10-13 23:31 2317Extjs的对Dom最基础的封装，主要包括：元素的包含关系，元 ... -
Extjs源码之---Ext.util.DelayedTask
2011-10-12 22:56 2399/* 创建对象 var task = new Ext. ... -
Extjs源码之-- Ext.util.JSON
2011-09-23 23:19 3995很多写extjs的朋友说，Extjs的源码之间的关系太紧了，所 ... -
Ext.form.ComboBox 远程带分页显示
2011-09-23 22:00 1839很多时候针对大数据量的下拉列表的时候，我们通常需要分页显示数据 ... -
Ext.form.ComboBox change事件的BUG
2011-09-08 23:11 5352因为项目需要，想用Ext的combo控件实现动态级联，发现co ... -
Ext.grid.EditorGridPanel 中combo的显示异常
2011-09-03 00:58 2742Ext.grid.EditorGridPanel 在项目中用到 ... -
extjs源码分析-Ext.util.TaskRunner(模拟多线程)
2011-08-12 12:09 2966/** * @class Ext.util.TaskR ... -
extjs源码分析-016(Ext....)
2011-03-28 23:04 1017Ext.apply(Ext, function(){ ... -
extjs源码分析-015(Number扩展)
2011-03-20 01:03 835Ext.applyIf(Number.prototype, ... -
extjs源码分析-013(Array扩展)
2011-03-19 11:03 1080Ext.applyIf(Array.prototype, ... -
extjs源码分析-013(String扩展)
2011-03-18 23:05 1219//字符串替换 /* var cls = 'my-cl ... -
extjs源码分析-012(Funtion扩展)
2011-03-18 22:42 1258Ext.apply(Function.prototype, ... -
extjs源码分析-011(namespace)
2011-03-10 22:54 1051//命名空间,就是创建一个OBJ的一个属性, names ... -
extjs源码分析-009(Ext.urlAppend/toArray)
2011-03-10 22:43 1823//在URL后面追加参数 urlAppend : fun ... -
extjs源码分析-009(Ext.urlDecode/urlEncode)
2011-03-09 23:17 3194//把json格式转化成url的编码方式 // e.g. ... -
extjs源码分析-008(Ext.removeNode)
2011-03-09 22:35 1748DOC = document; removeNode : ... -
extjs源码分析-007(Ext.each)
2011-02-08 14:40 1580each : function(array, fn ... -
extjs源码分析-006(Ext.override/Ext.extend)
2011-02-08 00:40 2094override : function(o ...
相关推荐
Ext_Net_CheckboxGroup 勾选、全选、反选和限制勾选
TreePanel的checkbox节点操作及父子节点联动的演示DEMO
该插件是一个树状复选框组件，解决需要划分多级功能的需求，如权限分配、商品划分等功能。
Extjs 模拟下拉多选checkbox
EXTjs2 的treeNode 带有checkbox，可是API中，关于checkbox的事件就只有一个checkchange事件，所以写个方法传上来。
EXT TREE 扩展CHECKBOX所需JS loader方法中添加： baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI }
纯javascript实现,有checkbox的dtree,下载就可以试用，有完整实例
Bootstrap Checkbox 是复选框组件，基于 Bootstrap 框架。在线演示 标签：Bootstrap
基于vue的element组件Checkbox多选框【竖向多列】展示
自己编写的一个checkbox的小例子，结合了Intent和css的使用很适合初学者使用，便于记忆可以直接下载放到开发工具上运行。
TreePanel的checkbox节点操作及父子节点联动的演示DEMO，前面那个有Bug，选中子节点时，没能选择父节点。 这个版本修正了
带有图标和checkbox的下拉组件；下拉列表项中标题前面带有不同类型的小图标；后面是checkbox多选框；点击checkbox选择；与select2有些相似；弹又有些不一样 更多组件...
html checkbox cash 表单提交checkbox 多选
方便大家复制粘贴使用，提高大家的效率。...引入组件即可 <TC-checkbox></TC-checkbox> 如需要删除多余的部分 uni_modules/TC-checkbox/components/TC-checkbox/TC-checkbox 以上路径上进行修改即可
微信小程序第二章 基础组件checkbox组件
NULL 博文链接：https://lw671579557.iteye.com/blog/579242
android组件 RadioButton,CheckBox,Toast简单介绍，
NULL 博文链接：https://sarin.iteye.com/blog/1665694
NULL 博文链接：https://danferj.iteye.com/blog/525889