View Full Version : Setting focus to a combo box?

8 Mar 2010, 6:30 PM
I have a simple Ext JS html page that has a text field, a combo box and another text field in that order. When the page finishes loading I want the combo box to have focus.

For this issue and the example I render the widgets to div tags, but in my actual application they are in a toolbar, but the behavior is the same. The example page can be run at http://dev.comicbookupcdb.com/combofocus.html.

I tried what I thought was logical, to call the focus() method on the combo box at the end of the Ext.onReady() function. What happens when I do this is that the combo box gets focus but the dropdown list is expanded. I want the combo box to get focus with the drop down list collapsed.

What I'm finding is that I'm having to put the call to the focus() method in the load event for the JsonStore that is the store for the combo box. Is this the right way to do this?

But what I really want to know is why?! :-/

I did some simple investigation before coming to the above conclusion by place console.log() function calls in various places: at the end of onReady, in the combo box's render and after render events and in the data store's load event. The order that I saw the output in the console was:
Render event After Render event end of the OnReady() function Load Event.

So it would appear that the load event is firing last and if the combo box has focus before the data store has loaded, it causes the dropdown list to expand?


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Greg Test Page</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

Ext.onReady(function() {

var pubComboDs = new Ext.data.JsonStore({
url: 'data/publishers.json',
root: 'rows',
totalProperty: 'results',
idProperty: 'pub_id',
fields: [ {name: 'pub_id', type: 'int'}, 'name' ],
autoLoad: true,
listeners: {
'load' : { fn: function(store, records, options) {

var combo = new Ext.form.ComboBox({
renderTo: 'combo',
store: pubComboDs,
valueField: 'pub_id',
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a Publisher...',
selectOnFocus: true,
id: 'pub_combo',
typeAhead: true,
resizable: true,
width: 175,
listeners: {
'render' : { fn: function(comp) {
// comp.focus();
'afterrender' : { fn: function(comp) {
// comp.focus();

var text1 = new Ext.form.TextField({
renderTo: 'text1',
id: 'text_field1',
width: 175

var text2 = new Ext.form.TextField({
renderTo: 'text2',
id: 'text_field2',
width: 175

// text1.focus();
console.log('end of onReady');
// combo.focus();




<div id="text1" style="padding: 15px 0px 0px 15px;"></div>
<div id="combo" style="padding: 15px 0px 0px 15px;"></div>
<div id="text2" style="padding: 15px 0px 0px 15px;"></div>


JSON Record Set

{"pub_id":"8","name":"ADV Manga"},
{"pub_id":"11","name":"AiT\/Planet Lar"},
{"pub_id":"35","name":"D.C. Thomson"},
{"pub_id":"2","name":"Dark Horse"},
{"pub_id":"38","name":"Del Rey"},
{"pub_id":"40","name":"Devil\u2019s Due"},
{"pub_id":"41","name":"Digital Manga"},
{"pub_id":"43","name":"Drawn and Quarterly"},
{"pub_id":"55","name":"Fleetway Quality"},
{"pub_id":"58","name":"Gold Key"},
{"pub_id":"62","name":"Heavy Metal"},
{"pub_id":"59","name":"HM Communications"},
{"pub_id":"65","name":"Idea + Design Works"},
{"pub_id":"68","name":"Kitchen Sink"},
{"pub_id":"69","name":"Last Gasp"},
{"pub_id":"71","name":"London Night"},
{"pub_id":"75","name":"Marvel UK"},
{"pub_id":"84","name":"Parody Press"},
{"pub_id":"86","name":"Radio Comix"},
{"pub_id":"89","name":"Rip Off"},
{"pub_id":"91","name":"Slave Labor"},
{"pub_id":"92","name":"St. John"},
{"pub_id":"97","name":"Top Shelf"},

8 Mar 2010, 11:04 PM
explaining the why should be easy: ajax.

your script gets executed, your json-store fires a request to the server (autoLoad:true), which takes much longer than the execution-time of the script. when the response arrives with the data of the combo, the store adds the records and the dataView behind the combo is rendered. the load-event fires.

kind regards,

9 Mar 2010, 2:35 PM
OK, the order of the firing of the various events... yes, I agree is the nature of asynchronous processing (the A in Ajax).

But that still doesn't answer my real questions :">

What is causing the combo box's drop down list to expand? Seams related to the fact that the combo box's data store hasn't finished loading yet... though I would think as long as the combo box has been rendered that it wouldn't matter.

And is calling the combo box's focus() method in it's data store load event listener the correct way to give the combo box focus?

Thanks and Regards,
-- Greg

9 Mar 2010, 2:54 PM
i took a look into the source of the combo:

// private
onLoad : function(){
if(this.store.getCount() > 0 || this.listEmptyText){
if(this.lastQuery == this.allQuery){

if(this.autoSelect !== false && !this.selectByValue(this.value, true)){
this.select(0, true);
if(this.autoSelect !== false){
if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){


kind regards,