做的是二级级联。本地数据(数组形式)
在父节点 中 listeners 属性中,用的是 select 子属性。
现在能首次级联成功,级点击父节点,子节点会出来数据;但是再第二次点击父节点时,子节点数据依旧是上次的数据,没有改变过来。
父级 listeners 监听事件代码。
listeners: {
select: function(combo, record, index){
secondstore.loadData(second_array[record[0].data.first_arrayId]);
}
查看api, 以为这个 lastQuery 还蛮有点用的,但对于本地数据,测试发现不是那么好用吶,目前还是不清楚怎么解决,各位有什么好的注意?
在测试中发现,select 属性只会触发一次,选择一次后就决定了,不能被改变,这个怎么绕过它啊
修改三:代码
Ext.application({
name : 'MyApp',
launch : function() {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "用户管理维护", expanded: true, children: [
{ text: "系统用户管理维护", leaf: true },
{ text: "会员管理维护", leaf: true}
] },
{ text: "产品管理维护", expanded: true, children:[
{text: "产品浏览", leaf: true},
{text: "产品挂牌", leaf: true},
] }
]
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'north',
xtype: 'component',
padding: 10,
height: 40,
html: '------测试 - 业务管理系统'
},{
xtype: 'panel',
title: 'Navigation',
region: 'west',
width: 250,
split: true,
layout: 'fit',
collapsible: true,
items:[{
xtype: 'treepanel',
store: store,
rootVisible: false,
listeners:{
itemclick: {
fn: function(s,r){
if(r.data.leaf){
addtab(r.data.id,r.data.text);
}
}
},
}
}]
},{
region: 'center',
xtype: 'tabpanel',
id: 'MainTabPanel',
items:[{
title: 'Tab 1',
bodyPadding: 20,
html: '<h2>Content...</h2>'
}]
}]
});
}
});
//增加tabpanel函数
function addtab(id, name){
var tabId = "tab-"+id;
var tabTitle = "mugbya" + name;
var centerpanel = Ext.getCmp('MainTabPanel');
var tab = centerpanel.getComponent(tabId);
if (!tab) {
tab = centerpanel.add(new Ext.Panel({
id : tabId,
title : tabTitle,
autoScroll : true,
border : false,
closable : true,
layout:'hbox',
items:[product]
}));
centerpanel.setActiveTab(tab);
} else{ // 如果MainTabPanel,那么就直接将节点指向这个页面
centerpanel.setActiveTab(tab);
};
}
//定义级联关系数组
var first_array = [[1,'发行期为零'],[2,'固定发行期'],[3,'固定发行期']];
var second_array = new Array();
second_array[1] = [[11,'一口价'],[12,'面议']];
second_array[2] = [[21,'一对多'],[22,'一对一']];
second_array[3] = [[31,'我们'],[32,'他们']];
// 小面板放在父面板前面
var combo_1 = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ["first_arrayId","first_arrayName"],
data : first_array
}),
listeners : {
select : function(combo, record, index){
console.log(combo.value + "--- " + record[0].data.first_arrayId);
console.log(record[0].data);
combo_2.clearValue();
combo_2.store.loadData(second_array[record[0].data.first_arrayId]);
}
},
queryMode:'local',
fieldLabel:'发行期选择',
valueField:'first_arrayeId',
displayField:'first_arrayName',
hiddenName:'first_arrayId',
forceSelection : true,
name:'first_arrayId',
triggerAction : 'all',
anchor:"80%",
editable : false
});
var combo_2 = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ["secondstoreId","secondstoreName"],
data : []
}),
queryMode:'local',
fieldLabel:'交易方式选择',
valueField: 'secondstoreId',
displayField:'secondstoreName',
hiddenName:'secondstoreId',
name:'secondstoreId',
anchor:"80%",
editable : false,
forceSelection : true,
triggerAction: 'all'
});
//增加表单面板
var product = new Ext.form.Panel({
title : '<span >本地数据</span>',
xtype: 'form-combos',
width: 500,
layout: 'form',
defaultType: 'fieldset',
// frame : true,
bodyStyle : 'padding:5 5 0',
defaults : {
'margin-bottom': '20px',
defaultType: 'combobox',
layout: 'anchor',
labelSeparator : ': ',
labelWidth : 100,
width : 330,
allowBlank : false, //允许为空
labelAlign : 'left'
},
items : [combo_1,combo_2]
});
你应该监听 ComboBox
的 change
事件。