工作记录1：extJS-checkboxgroup复选框和combo联动

工作记录1：extJS-checkboxgroup复选框和combo联动

第一次接触前端，更是第一次接触extJS，记录下来。
目的是首先将单选框变下拉框，复选框变为多行，然后将复选框和下拉框联动，即复选框中选中的项作为下拉框中的下拉列表项。

经过查询学习了很多extJS的资料，

复选框和下拉框采用两个items

items : [{
//     单选框
//     fieldLabel : '单选框',
//     xtype : 'radiogroup',
//     id : 'TFIL_FLG',
//     name : 'TFIL_FLG',
//     columns : columnsNum, 
//     allowBlank : false,
//     emptyText : ' ',
//     anchor : '100%',
//     items:fil_typs1
//-------------------
    //下拉框
    fieldLabel: '下拉框',
    xtype : 'combo',
    id : 'TFIL_FLG',
    name : 'TFIL_FLG',
    triggerAction: 'all',
    hiddenName: 'TFIL_FLG',
    mode : 'local',
    editable: false,
    //这种合适的数据{ name:,inputValue:,boxLabel:}，只能JsonStore
    store : new Ext.data.JsonStore({
    fields :["name","inputValue","boxLabel"],
        data :fil_typs1
    }),
    valueField: 'inputValue',
    displayField: 'boxLabel',
    allowBlank: false,
    emptyText: '请输入标识文件',
    anchor : '100%',
    width :400
}]

items: [{
    fieldLabel: '复选框',
    xtype : 'checkboxgroup',
    id : 'TFIL_TYP',
    name : 'TFIL_TYP',
    columns :columnsNum, 
    //2. 加入columns选项，复选框变为多行，每行显示columns列
    allowBlank: false,
    emptyText: ' ',
    anchor : '100%',
    width :800, //2. 列宽
    items:fil_typs2,
    /* 4.复选框和下拉框之间建立联动关系。复选框中选择的项作为下拉列表显示，基于checked是否为true决定是否显示*/
    listeners: {
        change: function(field){
            var tfilTyp = field.items;
            var flg = Ext.getCmp("TFIL_FLG").getStore();
            flg.removeAll();
            var flag = true;
            for(var i = 0; i < tfilTyp.length; i++){
                if(tfilTyp.get(i).checked){
                    flag = false;
                    flg.add(new Ext.data.Record(tfilTyp.get(i)));
                }
            }
            if(flag){
                for(var i = 0; i < fil_typs1.length; i++){
                    flg.add(new Ext.data.Record(fil_typs1[i]));
                }
            }
        }
    }
}]   

效果如下所示：
原始：

更改后：

相关资料
Sencha中文站 ： http://extjs.org.cn/
Ext4.1.0 Doc中文版 V1.0.0 Beta：http://extjs-doc-cn.github.io/ext4api/
extjs radio样例集合：http://tianya23.blog.51cto.com/1081650/821394
Extjs中创建Store数据源的方式：http://www.xuehuile.com/blog/ef64ad6c72be4d3cb3c481b34ba75023.html
ExtJS之Store：http://zccst.iteye.com/blog/1246946
ExtJs之Ext.data.Store：http://www.cnblogs.com/luluping/archive/2009/07/21/1527471.html
A Sencha ExtJS checkboxgroup and checkboxlistener example：http://alvinalexander.com/source-code/software-dev/sencha-extjs-checkboxgroup-and-checkbox-listener-example