1. #1
    Ext User
    Join Date
    May 2008
    Posts
    6
    Vote Rating
    0
    enickma is on a distinguished road

      0  

    Default Combobox with SimpleStore

    Combobox with SimpleStore


    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:

    Code:
    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:

    Code:
    <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:
    Code:
    <div id="combotest"></div>
    Any help much appreciated!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    May 2008
    Posts
    6
    Vote Rating
    0
    enickma is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    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!

    Quote Originally Posted by Condor View Post
    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.

    Quote Originally Posted by Condor View Post
    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.

  4. #4
    Ext User
    Join Date
    Sep 2007
    Posts
    66
    Vote Rating
    0
    thaiat is on a distinguished road

      0  

    Default


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

    PHP Code:
    var = 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',
        
    editablefalse,
        
    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

  5. #5
    Ext User
    Join Date
    May 2008
    Posts
    6
    Vote Rating
    0
    enickma is on a distinguished road

      0  

    Default


    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?

  6. #6
    Ext User
    Join Date
    Sep 2007
    Posts
    66
    Vote Rating
    0
    thaiat is on a distinguished road

      0  

    Default


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

  7. #7