PDA

View Full Version : Auto Expand Combobox after load



mwarner
1 Apr 2011, 3:49 AM
I have a comboxbox that gets loaded after typing a wildcarded search term into a textfield. Submitting the search term causes the store of the combobox to be loaded which invokes a call to the server to perform the search and bring back the results to be populated into the combobox. All of this working fine but I want the combobox to then expand after it is loaded to indicate that the search is completed.

I added a callback to the load but it appears that it is being invoked before all of the data has been loaded into the combobox. The combobox is expanded, sometimes with a single row of nothing or sometimes with only one row. Clicking combobox will display all of the populated data. I'd rather not put some arbitrary delay on the callback function. Is there any other way to detect when the combobox has been loaded?

Thanks

mohan_b
3 Apr 2011, 12:16 PM
try using the focus method of the combo.. defer the call if need be

RacingTomcat
22 Aug 2011, 7:36 AM
My ComboBox element does expand after I set the focus on it.
But the height of the list is 0px.

Here is the my ComboBox:


user_combo = new Ext.form.ComboBox({
id: 'user_combo',
name:'mainUser',
hiddenName:'mainUser',
displayField:'username',
valueField:'id',
store: user_store,
mode:'local',
width: 300,
lazyInit: true,
typeAhead:true,
selectOnFocus:true,
triggerAction: 'all',
})


And here is the Listener to open the box on rendering:


user_combo.on({
'render' : function(combo, record, index) {
combo.focus();
combo.expand();
},
scope: this,
delay: 1
});


The store is loaded. Even the elements are generated in the code.


<div class="x-layer x-combo-list " id="ext-gen130" style="position: absolute; z-index: 12007; visibility: visible; left: 87px; top: 55px; width: 298px; height: 0px; font-size: 11px;">
<div class="x-combo-list-inner" id="ext-gen131" style="width: 298px;">
<div class="x-combo-list-item">User 1</div>
<div class="x-combo-list-item">User 2</div>
<div class="x-combo-list-item">User 3</div>
<!-- ... -->
</div>
</div>

After collapsing and opening the list again by clicking the trigger, everything is fine.

Does anyone has an idea to solve this issue?