Dependant Combo Box

[ktoole]

The following code loads the combo boxes for company and location. When you select a new company, the locations that are valid change the first time you change company. The second time you change the company value the locations in the drop down do not change. Another problem is that when the company changes, the location that is already there is not cleared and reset to empty text.


items:[{
xtype: 'form',
layout:'column', frame: true, labelWidth: 150,
labelAlign: 'right',
defaults: {columnWidth: 0.3, layout: 'form'},
items:[{
defaults:{xtype:'fieldset', layout:'form', anchor:'100%', autoHeight:true},
items:[{
xtype: 'panel',
labelWidth: 1,
items: [{
xtype:'combo',
id: 'add_BNCMP',
autoLoad: true,
triggerAction:'all',
forceSelection:true,
displayField:'TACNAM',
valueField:'TACOMP',
store: compStore,
editable: false,
}],
autoCreate:{
tag:'input',
maxlength:'2'
},
fieldLabel:'Company No.',
listeners:{
select:{
fn:function(){
Ext.getCmp('add_BNLOC').clearValue();
Ext.getCmp('add_BNLOC').getStore().load();
Ext.getCmp('add_BNLOC').reset();
}
}
}
},{
xtype: 'panel',
labelWidth: 1,
items: [{
xtype:'combo',
id: 'add_BNLOC',
autoLoad: true,
triggerAction:'all',
forceSelection:true,
displayField:'IANAME',
valueField:'IALOC',
fieldlabel: 'Location',
store: new Ext.data.JsonStore({
autoLoad:false,
url:'vvcall.pgm',
root:'VINLOC',
fields:['IALOC','IANAME'],
listeners:{
beforeload:{
fn: function(){
this.baseParams={
pgm:'MLPMABN2',
action:'getLocation',
comp: Ext.getCmp('add_BNCMP').getValue()
}
}
}
}
}),
editable: false,
}],
autoCreate:{
tag:'input',
maxlength:'4'
},
fieldLabel:'Location'
}]

[sean.lanktree]

When you switch the company combo box, can you verify that it does in fact fire off an Ajax request to reload the store for the location combo box? If so, is the data correct?

[ktoole]

It does not appear to fire off the AJAX request the subsequent times and I don't know why. The data that does come back the first time the request runs is correct.

[sean.lanktree]

Try this, change the following line from...


Ext.getCmp('add_BNLOC').getStore().load();


To....



Ext.getCmp('add_BNLOC').getStore().reload();

[ktoole]

It does the same thing, ignores the listener, if the statement is load or reload.

[ktoole]

I accidentally put the listener on the panel instead of on the combo box. Code change below. That's why it wasn't firing the listener off.



items:[{
xtype: 'form',
layout:'column',
frame: true,
labelWidth: 150,
labelAlign: 'right',
defaults: {columnWidth: 0.3, layout: 'form'},
items:[{
defaults:{xtype:'fieldset', layout:'form', anchor:'100%', autoHeight:true},
items:[{
xtype: 'panel',
labelWidth: 1,
items: [{
xtype:'combo',
id: 'add_BNCMP',
autoLoad: true,
triggerAction:'all',
forceSelection:true,
displayField:'TACNAM',
valueField:'TACOMP',
store: compStore,
editable: false,
listeners:{
select:{ fn:function(){
Ext.getCmp('add_BNLOC').clearValue();
Ext.getCmp('add_BNLOC').getStore().reload();
Ext.getCmp('add_BNLOC').reset();
}}
}
}],
autoCreate:{
tag:'input',
maxlength:'2'
},
fieldLabel:'Company No.'