当前位置:Web前端 > extjs> 正文

extjs checkboxGroup 复选框的用法

时间:2013-10-14类别:Web前端

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('信息提示',"加载权限失败");
            }
        }
    });
    		
  •  

    上一篇下一篇

    猜您喜欢

    热门推荐