PDA

View Full Version : Mutiple Combo Boxes Requiring 2 Clicks To Expand AFTER Initial Select



rkanemeier
4 Dec 2012, 3:57 PM
Preface:
I have several combo boxes sitting in a toolbar above a grid, organized in a hierarchy, from left to right (with items on the left having a higher precedent than the ones on the right). These combo boxes serve as filters for the data to be displayed in the grid. The combo boxes are coded to get data from a data store loaded from a remote DB. The combo boxes will need to be reloaded (via a store.load) when the combo boxes to the left of it have changed. This behavior does not apply to the 1st combo box (since it is on the far left). So if you select a value in combo box #1, then the values in combo box 2 have to have common values with combo box 1 (etc etc). Think of a country, state, city type filter.

Problem: (bear with me lol)
If I select a value in combo box #3 (city), the grid is reloaded (keep in mind, the same city name can exist in more than one state and more than 1 country). I then select a value in combo box #2 (state), the grid reloads again with both filters active. THEN when I go back to box #3 (city), I have to click on the box 2 times to get the box to drop down. When I use console.log, I can see that on that 1st click the expand listener is firing AND an ajax request is made sending back the appropriate JSON data (even though the drop down box does not expand).

As a side note, I understand that there are different ways to present data to solve this problem. I'm highly interested in understanding why this specific problem is happening.

Here are the combo boxes in the toolbar:



dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'add',
handler: function(btn) {
Ext.Msg.alert('Add Record','Add feature not available yet.');
}
},'-',{
xtype: 'tbtext',
text: 'Company:'
},{
xtype: 'combo',
itemId: 'searchCompany',
emptyText: 'ALL',
displayField: 'VVREC',
valueField: 'VVVALUE',
updateBeforeOpen: true,
editable: false,
triggerAction: 'all',
width: 50,
labelStyle: 'font-size: 10px;',
labelSeparator: '',
queryMode: 'local', // <-- this is important in order to control WHEN the data is loaded!!!
store: companyStore,
listeners: {
expand : function() { //4.0.7 example from dualcomboboxes.html
if ( this.updateBeforeOpen ) {
this.updateBeforeOpen = false;
this.store.load();
}
},
select: function() {
cogGrid.down('toolbar #searchRegion').updateBeforeOpen = true;
cogGrid.down('toolbar #searchArea').updateBeforeOpen = true;
cogDataStore.loadPage(1);
}
}
},'-',{
xtype: 'tbtext',
text: 'Region:'
},{
xtype: 'combo',
itemId: 'searchRegion',
emptyText: 'ALL',
displayField: 'VVREC',
valueField: 'VVVALUE',
updateBeforeOpen: true,
editable: false,
tiggerAction: 'all',
width: 110,
labelStyle: 'font-size: 10px;',
labelSeparator: '',
queryMode: 'local', // <-- this is important in order to control WHEN the data is loaded!!!
store: regionStore,
listeners: {
expand : function() {
console.log('region expanded');
if ( this.updateBeforeOpen ) {
this.updateBeforeOpen = false;
this.store.load();
}
},
select: function() {
cogGrid.down('toolbar #searchArea').updateBeforeOpen = true;
cogDataStore.loadPage(1);
}
}
},'-',{
xtype: 'tbtext',
text: 'Area:'
},{
xtype: 'combo',
itemId: 'searchArea',
emptyText: 'ALL',
displayField: 'VVREC',
valueField: 'VVVALUE',
updateBeforeOpen: true,
editable: false,
tiggerAction: 'all',
width: 110,
labelStyle: 'font-size: 10px;',
labelSeparator: '',
queryMode: 'local', // <-- this is important in order to control WHEN the data is loaded!!!
store: areaStore,
listeners: {
expand : function() {
console.log('area expanded');
if ( this.updateBeforeOpen ) {
this.updateBeforeOpen = false;
this.store.load();
}
},
select: function() {
cogDataStore.loadPage(1);
}
}
},'->',{
text: 'Clear',
iconCls: 'delete',
handler: function(btn) {
Ext.Msg.alert('Clear Filters','Clear feature not available yet.');
}
}]
}

I know this is a lot of information in one post. I don't know enough about what is happening under-the-covers to cause this behavior. It just seems that combo box doesn't want to drop down even though it is loaded with data.

Thanks in advance for your time and patience.

mitchellsimoens
6 Dec 2012, 8:04 AM
Are you using 4.0.7?

rkanemeier
6 Dec 2012, 11:13 AM
Yes sir, I am. Unfortunately, an update to the version of ExtJS is not an immediate solution for me.

rkanemeier
16 Aug 2013, 10:22 AM
I'm combing back through my older posts to update them to answered and select a best answer.

It is my understanding that this is a known issue with ExtJS 4.0.7. To resolve it, you will need a few pieces of additional code. If you are developing a non-MVC app, put this at the top of your code. If it's MVC, I think you add it to your controller.



// Resolve ExtJS 4.0.7 linked combo box issue with load mask
Ext.override(Ext.LoadMask, {
onHide: function() {
this.callParent();
}
});


You will also need to make sure your combo box has a "name" and not just an "itemId". The "queryMode" needs to be set to local and you will need to set up listeners to control when to update the combo box store (if need be). These things solved my problem.