Forms Combo Select Bug

[benny]

Could this be a bug in the Combo object?

var combo = new Ext.form.ComboBox({
store: myJsonDataStore,
displayField:'item',
valueField:'item',
hiddenName:'id',
typeAhead: true,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select an item.....',
selectOnFocus:true
});

combo.applyTo('cat-list'); // attach to div
combo.select(2, true); // select 3rd option

The problem is with the last line of code. My understanding is 'select()' should select the option, but it does not.

From the API docs:

select
public function select(Number index, Boolean scrollIntoView)
Select an item in the dropdown list by it's numeric index in the list
Parameters:

* index : Number
The zero-based index of the list item to select
* scrollIntoView : Boolean
False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)

Returns:

* void

This method is defined by ComboBox.


Bug? my understanding of the docs? or just my coding? :)

[tryanDLS]

I believe this was a bug fixed in SVN - haven't had a chance to retest it yet.

[benny]

Thanks tryanDLS,

I have no access to SVN, any indication of when this will be released?

For clarity, the bug seems to be related to this part of combo.js:

select : function(index, scrollIntoView){
this.selectedIndex = index;
this.view.select(index);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
if(el){
this.innerList.scrollChildIntoView(el);
}
}
},


Do you know if there is a hack I can use until the next release?

[jack.slocum]

It's not a bug. You can't select data in the store if it hasn't been loaded. If you want to select something after the store is loaded, you will have to attach to it's load event.

[benny]

Thanks Jack, I'm still a little confused on how to do this.

Using the above code, I can see the correct element is selected, but it is not scrolled to.
I then thought of putting in a delay to allow it time to load/render into the DOM, like this:
setTimeout(function() {combo_1.select(2);}, 10);
But that did not help either.

When you say attach to its load event, would I do this:

// apply dataStore to combo id
combo_1.applyTo('cat-list_1');

// get object for combo
var myCom = Ext.get("cat-list_1");

// capture load event for combo
myCom.on('load', function() {
combo_1.select(2);
});


The above does not work, but I think the problem is with 'load' - I'm not sure how to capture the load event (only click etc..)

Note that all of the above code sits inside 'Ext.onReady(function(){ }'

Many Thanks, and sorry for posting this is the bugs section when it is not a bug.

[jack.slocum]

Hi Benny,

I meant the load event of the store. Is it a local or remote store?

[benny]

Hi Benny,

I meant the load event of the store. Is it a local or remote store?

Jack, It's a local store...

var store_<?=$cnt_tmp?> = new Ext.data.Store({
reader : new Ext.data.JsonReader({},['id', 'item'])
});
store_<?=$cnt_tmp?>.loadData(<?=$data?>);

<?=data?> = raw Json data generated using PHP (json_encode())

Just tried changing to:

store_<?=$cnt_tmp?>.on('render', function() {
combo_<?=$cnt_tmp?>.select(2);
});
.. but same problem.

[jack.slocum]

Try 1.0.1, if that doesn't work we will investigate more.

[benny]

I've updated the ext-all.js to version 1.0.1a (and yui adapters) - but there is no noticeable difference.

The items do get selected, but not scrolled to (i.e. it shows the emptyText [..select an item]), and when the down arrow is clicked, the correct item (element 3) is highlighted.

[simeon]

sorry about the cross post here (i just posted about this in another, less relevant combo box discussion).

I am calling the select() method and it appears to select but doesn't update the input(ie. user visable portion)

when I open the menu it shows as being selected in there.

It also doesnt fire the select event, which is probably why the input is not getting updated.

[tryanDLS]

The doc on select and selectByValue is a little out of date. In SVN, it now says this:

* Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
* The store must be loaded and the list expanded for this function to work, otherwise use setValue


Updating your other thread with same.

[purge]

This is quite limiting - if el.setValue() correctly matches a list element, it should fire a select event, otherwise setting defaults in the dropdown is quite difficult. A setById() helper method would be useful too.

Thanks.

[TheRebelGriz]

I've had the same issue (Ext using 1.0.1a).

Basically, I have a Grid with a ComboBox in the GridHeaderPanel. The ComboBox (select only) contains the filter values used to populate the Grid with JSON data... The Values for the ComboBox are from a SimpleStore defined in the js file...

Given that I have the following event on the ComboBox:
cbAttrType.on( 'select', function() { ds.load({params:{start:0, limit:25, html: 'getData', data: 'attrsByType', attrType: cbAttrType.getValue() }}) } );

I tried the following code, but it did not work, as advertised (in the docs) or like my interpretation of the api descriptions...:
cbAttrType.setValue('DIVISION');
cbAttrType.selectByValue('DIVISION',true);
cbAttrType.select(0,true);
cbAttrType.selectNext();

Eventually, I came up with the following workaround:
cbAttrType.setValue('DIVISION');
cbAttrType.fireEvent('select');

Luckily, I know the initial Value that I want...

A potential helpful function for ComboBox would be:
getValueAt ( index )

[TheRebelGriz]

After muckin around, I was able to get the following to work, which basically selects the first item in the ComboBox, then fires the select event... which in turns loads the grid data...

cbAttrType.on( 'select', function() { ds.load({params:{start:0, limit:25, html: 'getData', data: 'attrsByType', attrType: cbAttrType.getValue() }}) } );
cbAttrType.setValue(store.getAt(0).get('attr_type' ));
cbAttrType.fireEvent('select');

[benny]

Still no luck getting this to work as it seems it was intended.

The easiest way to pre-select a combo is to generate standard HTML selects and use the transform feature. Not as nice as the other way, but hopefully more future proof.

To explain in more details.... I have a list of combos in a right panel and a grid in the center. When a row is selected in the grid, the right panel loads the combos with the related options selected. I hoped to just update the Selected value.... but this will not work without a lot of crazy hacks (at least as far as I can tell). So, I use AJAX to load the combo HTML with the standard 'selected' set in the correct option, then call the JS to redo the transformation. It is real slow for the user, but the only sensible way to get it working.

If anyone has found a more elegant solution, please share.

[kaig]

setValue alone does not work for me, I'm also calling setRawValue() (with the same value as setValue())

Maybe this helps for you?

Regards

Kai