extjs checkboxGroup 复选框的用法
类别:Web前端 浏览量:5231
时间:2013-10-14 extjs checkboxGroup 复选框的用法
extjs checkboxGroup 复选框的用法在extjs中,为便于功能实现,通常会使用到checkboxgroup以及radiogroup的控件,在实际使用中,如何获取或设置该控件的值?下面通过实例介绍一下。
<script type="text/javascript">
Ext.onReady(function() {
new Ext.form.FormPanel({
title:'CheckboxGroup黑人RadioGroup组件示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame:true,
height:120,
width:270,
renderTo:Ext.getBody(),
defaults:{//统一设置表单字段默认属性
labelSeparator:':',//分隔符
labelWidth:50,//标签宽度
width:200,//字段宽度
labelAlign:'left'//标签对齐方式
},
items:[{
xtype:'radiogroup',
fieldLabel:'性别',
columns:2,//2列
items:[
{boxLabel:'男',name:'sex',inputValue:'male'},
{boxLabel:'女',name:'sex',inputValue:'female'}
]
},{
xtype:'checkboxgroup',
fieldLabel:'爱好',
columns:3,//3列
items:[
{boxLabel:'游泳',name:'swim'},
{boxLabel:'散步',name:'walk'},
{boxLabel:'阅读',name:'read'},
{boxLabel:'游戏',name:'game'},
{boxLabel:'电影',name:'movie'}
]
}]
});
});
</script>
效果图:
取值
如何获取这个checkboxgroup值,查看API,getValue返回时对象形成的数组,为获取该值,通过一下代码:
var FileItype=showserach.getForm().findField('FileItype').getValue();
var s='';
for(i=0;i<FileItype.length;i++)
{s=s+','+FileItype[i].inputValue}
ds.baseParams={FileItype:s.substr(1)};
传递至后台,以字符串的方式进行:
根据后台数据动态创建CheckboxGroup
提示:
ExtJS中的CheckboxGroup(和RadioGroup)默认不能动态添加item。虽然它继承了Ext.form.Field,但是却类似于容器。
在CheckboxGroup构造是,它会将配置中的items等配置项处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态修改。
如果需要根据后台数据动态创建的话,最好试着创建整个CheckboxGroup,而不是动态添加item。
实现代码:
Ext.Ajax.request({
url: 获取动态数据的URL,
callback: function(options,success,response){
if(success = true){
var obj = eval( "(" + response.responseText + ")" );
//拼接checkbox子项目
var checkboxitems="";
for(var i = 0;i<obj.groups.length;i++){
if(checkboxitems!="")
checkboxitems+=",";
else
checkboxitems+="[";
var groupid = obj.groups[i].groupid;
var checkboxSingleItem = "{boxLabel:'"+obj.groups[i].groupname+"',name:'"+obj.groups[i].groupname+"',id:'"+obj.groups[i].groupid+"',inputValue:'"+obj.groups[i].groupid+"'";
var usergroup=obj.usergroups;
for(var j=0;j<usergroup.length;j++){
if(usergroup[j].groupid == groupid){
checkboxSingleItem += ",checked:'true'";
}
}
checkboxSingleItem+="}";
checkboxitems+=checkboxSingleItem;
}
checkboxitems+="]";
var itemsGroup = new Ext.form.CheckboxGroup({
fieldLabel: '选择权限',
name:'user_add_checkboxgroup',
width:380,
id:'user_add_checkboxgroup',
columns: 1,
name:'items',
width:360,
columns:1,
items:eval(checkboxitems)
});
addFormPanel.add(itemsGroup);
addFormPanel.doLayout();
} else {
Ext.MessageBox.alert('信息提示',"加载权限失败");
}
}
});
您可能感兴趣
- extjs Border边框布局
- extjs xtype的使用
- extjs tabPanel的用法
- Extjs中FieldSet的收缩和展开
- Extjs中grid 的ColumnModel 属性配置
- extjs accordion折叠布局
- extjs column列布局
- ExtJs中getCmp、getDom、Get的区别
- extjs table布局
- Extjs menu菜单的简单用法
- extjs实现树形下拉框
- extjs 日期控件
- extjs中treegrid
- extjs anchor 锚点布局
- Extjs中文乱码
- Extjs updateProgress进度条的应用
- 天空是什么颜色(天空是什么颜色的英语)
- 高马尾扎发(高马尾扎发教程视频)
- 这里输入关键词(请手动输入关键词)
- 小说 顾瑾岚拿出一套飞行棋,别说你连飞行棋都不会哦(顾瑾岚拿出一套飞行棋)
- 金品公司 界界乐中秋限定飞行棋礼盒 露营藤篮礼盒全新上市(界界乐中秋限定飞行棋礼盒)
- 必看 8月,相比七夕,更需要注意的是这些事(必看8月相比七夕)
热门推荐
- serv-u界面怎么设置中文(Serv-U 550 Permission denied 的解决办法)
- css下填充代码(CSS学习笔记之常用Mixin封装实例代码)
- mysql索引建立及应用(MYSQL创建索引,这些知识应该了解)
- js tab栏案例(JavaScript实现Tab栏切换特效)
- mysql完整教程(MySql新手入门的基本操作汇总)
- sql server中cxpacket等待
- js实现自动轮播(原生js封装无缝轮播功能)
- mysql 内置函数
- navicat注册和激活码(Navicat12.1系列破解激活教程亲测有效)
- pythonselenium隐藏浏览器窗口(Python Selenium 之关闭窗口close与quit的方法)