extjs 中异步调入部门信息并根据部门信息生成 checkboxGroup

本文介绍了一个使用ExtJS框架实现的部门及员工选择组件的详细代码。该组件能够加载部门及其下属员工，并允许通过复选框进行选择。具体实现了部门和员工数据的加载与展示，适用于企业内部系统的权限分配或流程审批等场景。

这个东西折腾了我两天时间,GOOGLE和BAIDU都没有,问的人也不少,今天放出来与大家分享一下, 放在这里以备查询

/**
* 调入所有本单位员工,为建立部门选择组作准备
*/
var empstore = new Ext.data.ArrayStore( {
    url : 'flowAudit/listEmpByDepID',
    fields : [ 'depid','id', 'name','checked' ],
    sortInfo : {
        field : 'id',
        direction : 'ASC'
    },
    autoLoad:true
});
/**
* 在frm内建立部门及人员复选组
* @param frm
* @return
*/
function createDepCheckboxGroup(frm){

    function genDetails(depid,depname){
        items= [{id:'d-'+depid,boxLabel: '<b>'+depname+'</b>', checked: false}];
        empstore.each(function(record){
            var thedepid=record.get('depid');
            if(depid==thedepid){
                var theid= record.get('id');
                var thename=record.get('name');
                var thechked=record.get('checked');
                items.push({id:'p-'+theid,boxLabel:''+thename,checked:thechked});
            }
        })
        return items;
    }

    var store = new Ext.data.ArrayStore( {
        url : 'department/comboxJson',
        fields : [ 'id', 'name' ],
        sortInfo : {
            field : 'id',
            direction : 'ASC'
        }
    });
    store.on('load',function(){
        Ext.getCmp(frm).removeAll();
        store.each(function(record) {
            var thedepid=record.get('id');
            var thedepname=record.get('name');
            var CBG = new Ext.form.CheckboxGroup({
                id:'depchkg'+thedepid,
                fieldLabel: thedepname,
                xtype: 'checkboxgroup',
                itemCls: 'x-check-group-alt',
                columns: 4,
                items:genDetails(thedepid,thedepname)
            });
            Ext.getCmp(frm).items.add(CBG);
            Ext.getCmp(frm).doLayout(true);
        });
    });
    store.load();
};