版本一
复选框的值都是直接指定。
Ext.onReady(function(){
var myCheckboxGroup = new Ext.form.CheckboxGroup({
id:'myGroup',
xtype: 'checkboxgroup',
renderTo :'form-cb',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
columns: 3,
items: [
{boxLabel: '唱歌', name: '1'},
{boxLabel: '游泳', name: '2', checked: true},
{boxLabel: '看书', name: '3'},
{boxLabel: '旅游', name: '4'},
{boxLabel: '游戏', name: '5'},
{boxLabel: '睡觉', name: '6'}
]
});
//CheckboxGroup取值方法
for (var i = 0; i < myCheckboxGroup.items.length; i++)
{
if (myCheckboxGroup.items.itemAt(i).checked)
{
alert(myCheckboxGroup.items.itemAt(i).name);
}
}
});
// 复选框
var myCheckboxGroup = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
name: 'model_type',
width: 80, //宽度220
columns: 1, //在上面定义的宽度上展示3列
fieldLabel: '机型类型cb',
items: [
{boxLabel: '存储机型', name: 'store'},
{boxLabel: '均衡机型', name: 'average'},
{boxLabel: '其他机型', name: 'other'}
]
});
// 2,收集复选框的值
var ids = [];
var cbitems = myCheckboxGroup.items;
for (var i = 0; i < cbitems.length; i++) {
if (cbitems.itemAt(i).checked) {
ids.push(cbitems.itemAt(i).name);
}
}
版本二
复选框的值也可以动态指定
DoctorWorkStation_CommonDoctorAdvice.CreateYZCheckBoxWin = function(store, colnum,title) {
var count = store.getCount();
var myCheckboxItems = [];
for (var i = 0; i < count; i++) {
var boxLabel = store.getAt(i).get("name");
var name = store.getAt(i).get("id");
myCheckboxItems.push({
boxLabel : boxLabel,
name : name
});
}
var myCheckboxGroup = new Ext.form.CheckboxGroup({
xtype : 'checkboxgroup',
itemCls : 'x-check-group-alt',
columns : colnum,
items : myCheckboxItems
});
var form = new Ext.FormPanel({
border : true,
frame : true,
labelAlign : "right",
buttonAlign : 'right',
layout : 'column',
width : 500,
items : [myCheckboxGroup],
buttons : [{
xtype : 'button',
text : '确定',
handler : function() {
var ids = [];
var cbitems = myCheckboxGroup.items;
for (var i = 0; i < cbitems.length; i++) {
if (cbitems.itemAt(i).checked) {
ids.push(cbitems.itemAt(i).name);
}
}
win.destroy();
if (ids.length) {
Ext.Msg.alert("消息", "选中状态的id组合字符串为:"
+ ids.toString());
}
}
}, {
xtype : 'button',
text : '取消',
handler : function() {
win.destroy();
}
}]
});
var win = new Ext.Window({
modal : true,
layout : 'fit',
title : title,
width : 500,
height : 300,
plain : true,
items : [form]
});
win.show();
}
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
基于EXTjs 的 动态复选框树 json数据交互
extjs4.1下拉复选框完整DEMO,包含了extjs4.1主文件,代码实现了动态加载功能,所以需要配置IIS或者apache。插件文件在ux目录下,请自行参考。
分享一个ExtJs Tree, 完整的带有复选框的树形结构
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
1、解压,进入extjs4.2.1\examples\form,浏览器打开 hbox-form.html 文件,当我勾选中任意一个多选下拉框,然后再勾选‘ALL’时,‘ALL’却是不被选中的状态,且...extjs4.2.1\examples\form\MultipleComboBox.js
extjs带复选框的树包括全选 反选 子选父以及 父选子 与adf在jsp页面得应用 包含了工具类以及针对extjs树节点增加、删除、修改的工具方法
//省份复选框 var $provinceCheckbox01 = new Ext.form.CheckboxGroup({ xtype: 'checkboxgroup', fieldLabel: '省份选择', labelWidth: 60, columns: 9, vertical: true, margin: '10 0 0 15', defaults: { ...
NULL 博文链接:https://stevelee.iteye.com/blog/1328992
extjs3.2 3.3 3.4都测试过可以使用,带有复选框的树菜单,选中父节点子节点全部选中,选中子节点父节点选中(以及父节点的父节点等),其余版本不知道能否使用
提问 - Boxy.ask() - 用户定义的选项,选择项传递给回调函数 弹出 - Boxy.alert() - 回调函数总是不被调用 确认 - Boxy.confirm() - 仅当用户选择了“确认”时回调函数会被调用 行业选择器 - Boxy.industry() - 仅当...
extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点。取消所有子节点时,才能取消根节点。 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border...
checkboxgroup中修改时赋值是最难解决的,要改写方法才能实现
Extjs3.0中的CheckboxGroup默认不能动态添加item,如需要数据动态创建,试着创建整个CheckboxGroup,而不是动态添加item,具体实现如下,感兴趣的朋友可以了解下
具体代码如下所示: Ext.define('AM.view.test.ReceiptList', { extend: 'Ext.grid.Panel', alias: 'widget.receiptlist', id : 'receiptlist', selModel : { selType : 'checkboxmodel', ...
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: 代码如下: var win = new Ext.Window({ modal : true, title : ‘确定要拒绝该表吗?’, width : 500, ...
Extjs3 多选下拉框LovCombo,Extjs3 多选下拉框LovCombo
ExtJs4 Checkbox tree
通过修改网络上的一个树的例子实现节点的动态加载,还支持checkbox。