There have been some very small changes in extjs 4.1 that affect the inner working of the combobox, and actually make it a bit easier to select the first record in the store as the default item in the list instead of just a blank space in the dropdown. (run-on sentences are ok as long as you don’t confuse affect and effect, right?)
To accomplish this task in extjs 4.1 just add the following listener to your combobox:
listeners: {
boxready: function(){
this.setValue(this.getStore().getAt(0).get(this.valueField),true);
// fire the select event ( Event in extjs )
this.fireEvent('select',this);
}
},
The ‘boxready’ event (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready) gets fired once after the component has been laid out for the first time at its initial size. The reason you would use this opposed to beforeshow or render is due to the fact that the combobox will not have a hook into the store until the boxready event is fired if it is initially hidden (say on a second tab, or in a popup window …), and you will get a undefined error running the third line of the code. You will also run into issues if you don’t auto load the store.
Brilliant! That’s exactly what I was looking for. ‘Boxready’ event did the trick. Tried the same with ‘afterrender’, but that sometimes did not work (probably for the reasons you mentioned in your post). Thanks a lot.