ExtJS 动态添加checkboxgroup

现在做的东东，要求是要把权限控制到个,对象。所以添加对象的时候就要对他进行阅读组的设置，阅读组用角色来划分，这是简单的解决办法，而角色为数单据库的数据，要显示到表中。着实让我脱了一层皮,硬是搞了一天才搞出来。绕了很多弯。现在将源码贴出来。

 

 

checkbox组件：


com.gwtjs.RoleGroup= Ext.extend(Ext.form.CheckboxGroup,{

oldId:"",

    arr:[{//第一个，默认的，节点
        boxLabel:'All Role',
        name:"roleId",
        inputValue:'0',
        value:'0'
    }],
    constructor:function(_cfg){
   if(!_cfg)_cfg={};

Ext.apply(this,_cfg); //追加配置
        _cfg = Ext.apply({
            fieldLabel:"阅读用户组",
            id:this.oldId+"roleGroup",
           defaults:{labelWidth:56},
                items:this.arr//此节点如果不加，会报items[0]找不到的错,后来动态添加的时候，再将他替换掉
        });
        Ext.Ajax.request({
            url:'../roleList.action',
            success:function(response,opt){
                var _r = eval('('+response.responseText+')');
                var list = _r.pager.entityList;
                count = _r.pager.totalCounts;
                var obj = Ext.getCmp(this.oldId+'roleGroup');//按ID取组件,这样做要注意，最后加个追加的ID
                for(var i=0;i<count;i++){
                    var rowSt = list[i];
                    obj.items[i]={
                        xtype:'checkbox',
                        boxLabel:rowSt.name,
                        name:"roleId",
                        inputValue:rowSt.id,
                        value:rowSt.id
                    };
                }
            }
        });
        com.gwtjs.RoleGroup.superclass.constructor.call(this, _cfg);
    }
});


form：
 
com.gwtjs.ResourceForm = Ext.extend(Ext.form.FormPanel,{
    oldId:"",
    lock:false,
    frameset:null,
    roleGroup:null,
    RoleForm:null,
    constructor:function(_cfg){
        if(!_cfg) _cfg = {};
        Ext.apply(this,_cfg);
        if(!this.roleGroup)
            this.roleGroup = new com.gwtjs.RoleGroup({oldId:this.oldId});
                
        this.RoleForm = new Ext.form.FieldSet({
            xtype:"fieldset",
            autoHeight:true,
            layout: 'form',
            defaults : {
                border:false,
                anchor : "100%"
            },
            items:[{
                xtype:"textfield",
                name:'strainId',
                fieldLabel:"编号"
            },this.roleGroup]
        });
_cfg=Ext.apply({
            lableWidth:78,
            labelAlign : 'right',
            border:false,
            frame : true,
            defaults : {
                layout:"column",
                border:false,
                anchor : "100%",
                readOnly:this.lock
            },items:[{
                name:'id',
                xtype:"hidden"
            },{
                defaults:{
                    anchor:"100%",
                    layout:"form",
                    columnWidth:'.5'
                },
                items:[{
                    defaults:{
                        anchor : "100%",
                        readOnly:this.lock,
                        xtype : "textfield"
                    },
                    items:{
                        name:'host',
                        fieldLabel:"宿主（英文）"
                    }
                },{
                    defaults:{
                        anchor : "100%",
                        readOnly:this.lock,
                        xtype : "textfield"
                    },
                    items:{
                        name:'hostCn',
                        fieldLabel:"宿主（中文）"
                    }
                }]
            },{
                layout:'form',
                items:this.RoleForm
            }]
        });
        com.gwtjs.ResourceSearchForm.superclass.constructor.call(this, _cfg);
    }
});
 
完毕。。。
 

 

 

 

添加到表单时要注意渲染前后的区别