工作记录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