Combobox with SimpleStore

[enickma]

Hi can anybody tell me what's wrong with the following code?

Basically I need to populate a combobox with data from a url that's returning xml. The combobox is created and displayed correctly but the data won't load. I'm not getting any javascript error.

I have looked through the examples and forums but can't find a single case with exactly the same requirements.

I'm using extjs 2.1.

The code to create combobox:

var c = new Ext.form.ComboBox({
    id: 'ptype',
    name: 'ptype',
    renderTo:'combotest',
    fieldLabel: 'Type',
    store: new Ext.data.SimpleStore({
        // load using HTTP
        url: '...',

        fields: ['id', 'title'],
        autoLoad: true,

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
            record: 'row', id: 'id'
        }, [
            {name: 'id'},
            {name: 'title'}
        ])
    }),
    displayField: 'title',
    valueField: 'id',
    editable: false,
    listeners: {
        'render' : {
            fn: function() {
                this.store.load();
            }
        }
    }
});

The sample xml:

<items>
<row>
    <id>1</id>
    <title>Type 1</title>
</row>
<row>
    <id>2</id>

    <title>Type 2</title>
</row>
<row>
    <id>3</id>
    <title>Type 3</title>
</row>
</items>

The html:

<div id="combotest"></div>

Any help much appreciated!

[Condor]

Some suggestions:

1. You set both autoLoad:true and load in the render event.
2. The xml MUST have content type text/xml or application/xml, otherwise IE will load text instead of xml.
3. Try adding a loadexception eventhandler to the store to see if there are any problems during load.

[enickma]

1. You set both autoLoad:true and load in the render event.

Yes I have tried with only one or the other, and the fact that both didn't work is the very reason I chuck both in there - call that desperation!

2. The xml MUST have content type text/xml or application/xml, otherwise IE will load text instead of xml.

Yes the url that's returning the xml is tested on its own (when browsed) to be returning in xml format.

3. Try adding a loadexception eventhandler to the store to see if there are any problems during load.

Yes I have tried that and the event was never fired. I have also added a 'load' listener which always fires.

[thaiat]

Here is a modified version of your code that should work :

var c = new Ext.form.ComboBox({
    id: 'ptype',
    name: 'ptype',
    renderTo:'combotest',
    store: new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({
            url : '...'
        }),
        
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
            record: 'row', id: 'id'
        }, [
            {name: 'id'},
            {name: 'title'}
        ])
    }),
    
    triggerAction : 'all',

    displayField: 'title',
    valueField: 'id',
    editable: false,
    listeners: {
        'render' : {
            fn: function() {
                this.store.load();
            }
        }
    }
}); 

I made 2 modifications
1 - instead of SimpleStore (designed for array) you should use a standard Store
2 - you forgot to specify a triggerAction for the ComboBox

[enickma]

Thanks thaiat adding 'triggerAction' works!

But is it just me or do you or anyone here find extjs's documentation can sometimes be mis-leading? Say in this case, before trying this forum, I did look at 'triggerAction' under 'form.ComboBox' but it says:

"The action to execute when the trigger field is activated. Use 'all' to run the query specified by the allQuery config option"

Now in my case I did not have "allQuery" specified as a config option, so I thought it did not apply. Sure it turns out I was wrong but am I entirely to blame?

[thaiat]

I agree that triggerAction should be set to 'all' by default
Anyway that is what i do when i define a ComboBox

[mjlecomte]

Suggest you guys post your snippets of code to
http://extjs.com/forum/showthread.php?t=40317