您的位置：首页 > Web前端 > extjs > 正文

extjs checkboxGroup 复选框的用法

更多时间：2013-10-14 类别：Web前端浏览量：5231

extjs checkboxGroup 复选框的用法

extjs checkboxGroup 复选框的用法

在extjs中，为便于功能实现，通常会使用到checkboxgroup以及radiogroup的控件，在实际使用中，如何获取或设置该控件的值？下面通过实例介绍一下。

JScript 代码复制


<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。

实现代码：

JScript 代码复制


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 checkboxGroup 布局

上一篇：extjs中Toolbar工具栏

下一篇：Extjs msgTarget 提示位置

您可能感兴趣

extjs checkboxGroup 复选框的用法

extjs checkboxGroup 复选框的用法

热门推荐

排行榜