1. #1
    Ext Premium Member staticboy's Avatar
    Join Date
    Aug 2007
    Posts
    19
    Vote Rating
    0
    staticboy is on a distinguished road

      0  

    Question How to select the first list item on a ComboBox?

    How to select the first list item on a ComboBox?


    I have a non-editable ComboBox which displays a list of users and "Go" button next to it. Under normal circumstances the user is prompted to select an option from the list and press the "Go" button. However, under certain conditions I need to automatically select the first item on the list and programmatically press the "Go" button. I've got the button pressing sorted, but can't seem to select the first item on the list?

    Using the Ext.form.ComboBox.setValue() method I can select the first item programmatically no problem, e.g.,
    PHP Code:

    comboProfileOwner
    .setValue('00570000001234O'); 
    but the problem is that the list of users is dynamic and I won't know what the Id is of the first user on the list. I looked in the docs and it seemed as though Ext.form.ComboBox.select(index) should do the job by using .select(0) but only if the "store [is] loaded and the list expanded". Well the items have been successfully added to the list so I'm assuming the store has been loaded, but calling Ext.form.ComboBox.expand() seems to have no effect. This appears to be because in ext-all.js, line 200, the definition for expand() returns when:

    PHP Code:

    expand
    :function(){if(this.isExpanded()||!this.hasFocus){return;} 
    and in my case !this.hasFocus is true even though the element doesn't have focus.

    Help! I just want to pick the first list item!

  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Take a look at SelectBox (http://extjs.com/forum/showthread.php?t=6392) which has a selectFirst() function. Example here: http://crepitus.com/misc/ext/combo.html

  3. #3
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    251
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Question Auto-select the first option in a ComboBox

    Auto-select the first option in a ComboBox


    staticboy, did you get a solution worked out? This does seem like it should be simple, but I too am struggling to "simply" auto-select the first option in the ComboBox.

    I don't understand why I can't simply use the ComboBox's select() method. It seems that if I call myCombo.select(0, true), the first item should be selected and the display should represent this.

    Now, I'm dynamically loading my ComboBox using a "local" JsonStore. I'm doing something like:
    Code:
    myCombo.reset();
    myCombo.store.load();
    myCombo.select(0, true);
    This did not work, so I says to myself, "Of course this does not work. The load is asynchronous. You'll have to do your select(0, true) onload of the store." So I try:

    Code:
    myCombo.store.on('load', myCombo.select(0, true));
    This gives me a javascript error:
    Code:
    E.fireFn has no properties
    Ext.util.Observable=function(){if(this.listeners){this.on(this.listeners);delete...
    fay, I'm actually using the custom SelectBox, but the selectFirst() method is causing strange behaviour. My guess is that it actually fires the onselect event (unlike the ComboBox.select() method). Because I have two comboboxes that both affect the other onselect, auto-firing the select method causes a chain reaction.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Per the doc, the combo has to be expanded for select to do that. Is this the case? If not, use setValue with the value from row 0 in the store.

  5. #5
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    251
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS View Post
    Per the doc, the combo has to be expanded for select to do that. Is this the case? If not, use setValue with the value from row 0 in the store.
    Thanks for the tips, tryanDLS. It does appear that setValue() or perhaps even setRawValue() is more what I need. However, the index 0 value is unknown to me. It is loaded dynamically. So I need a way to tell the combobox to select the first option--whatever that option is. And I need this to happen whenever that combobox is reloaded.

  6. #6
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    251
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Thumbs up [SOLUTION] Auto select ComboBox first option

    [SOLUTION] Auto select ComboBox first option


    Solution...finally. In this code example, myDataColumn is a field name in my data store--the same field that I use as my ComboBox display value.

    Code:
    // I tell my second ComboBox that whenever you load,
    // select your first value automatically.
    myCombo2.store.on('load', function(){
        myCombo2.setValue(myCombo2.store.collect('myDataColumn', true)[0]);
    });
    
    // I load my first ComboBox from the server.
    myCombo1.store.load();
    
    // I tell my first ComboBox that when the user selects a value,
    // reset and reload the second ComboBox.
    // Oh, and pass the value of the first combo to the script
    // that loads the second combo. This way, we only load
    // values that are applicable.
    myCombo1.on('select', function(){
        myCombo2.reset();
        myCombo2.store.load({myCombo1Value:myCombo1.getValue()}});
    });

  7. #7
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    0
    devnull has a little shameless behaviour in the past

      0  

    Default


    I do it the same way, just with slightly different syntax:
    Code:
    store.on('load',function(ds,records,o){
      myCombo.setValue(records[0].data.myDataColumn);
    });

  8. #8
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    251
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Default


    Thanks, devnull! That is more elegant than my solution, and it teaches me what objects are passed to the load event. (Of course I could have figured that out using Firebug.)

    One thing I did learn is that in my particular case, sometimes there are not any records in my store--depends on what is selected. My solutions just works. Your solution gives a javascript error about accessing records[0] when no records exist. Easy to work-around of course--just test before trying.

    Thanks!

  9. #9
    Ext User
    Join Date
    May 2007
    Posts
    41
    Vote Rating
    0
    Carel is on a distinguished road

      0  

    Post hard-coded store

    hard-coded store


    and with a hard-coded store I do this

    myCombo.setValue(valuesToSelect)

  10. #10
    Ext User
    Join Date
    Nov 2009
    Posts
    5
    Vote Rating
    0
    xidianamoi is on a distinguished road

      0  

    Default


    thanks for tips,devnull!