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