Combo Box will not load from remote json or xml calls

**mzadig** · 24 Mar 2011 9:21 AM

I am new to EXT JS and need to load a combo box from an external data source.
I have been using a variation of ~/forms/combo.html (which I have included below).
When I load the box directly from the in-line data, everything works as expected. If I
change the querymode from 'local' to remote and set the data.store proxy to either xml or json
url: states.xml or states.json, neither call allows for the population of the combo.

Any assistance would be greatly appreciated. I have watched the loads with Firebug and the data is being loaded by the browser and looks correct.

thanks,

mike

Code:

==============  code follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Combo Boxes</title>

    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>

    <!-- Shared -->
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <!-- Example -->
<!--    <script type="text/javascript" src="combos1.js"></script>-->
    <style type="text/css">
        .example {
            width: 600px;
            border: 1px solid #CCC;
            padding: 0 10px;
            margin: 0 0 10px;
        }

        .x-fieldset {
            margin-top: 20px;
        }
    </style>
    
   <script type="text/javascript" >
   Ext.require([
    'Ext.form.ComboBox',
    'Ext.form.FieldSet',
    'Ext.tip.QuickTips',
    'Ext.data.*'
]);

Ext.onReady(function() {
    Ext.tip.QuickTips.init();

    // Define the model for a State
    Ext.regModel('State', {
        fields: [
         
            {type: 'string', name: 'name'}
        ]
    });

    // The data for all states
    var states = [
        {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
        {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"}
     
    ];

    // The data store holding the states; shared by each of the ComboBox examples below
    var store = new Ext.data.Store({
        model: 'State',
		autoLoad: true,
		proxy: {
				// load using HTTP
			    type: 'ajax',
				url: 'states.json',
				reader: 'json'
		/*		url: 'states.xml',
				 reader: {
							type: 'xml',
							record: 'name'
           				 } */
				}
		,
      //  data: states
    });

    // Simple ComboBox using the data store
    var simpleCombo = new Ext.form.ComboBox({
        fieldLabel: 'ComboTest1',
        renderTo: 'simpleCombo',
        displayField: 'name',
        width: 500,
        labelWidth: 130,
        store: store,
        queryMode: 'remote',
        typeAhead: true
    });

   
/*
The following is the structure of the json file used when this example is set to
remote.   Just save it in the local directory as states.json

states.json
{
    "states": [
		 {"abbr":'AL','name':'Alabama','slogan':'The Heart of Dixie'},
        {"abbr":'AK','name':'Alaska','slogan':'The Land of the Midnight Sun'},
    ]
}


The following is the file struct used for states.xml

<States>
<name>Alabama</name>
<name>Alaska</name>

</States>


*/
 

});

   </script> 
       
</head>
<body>
<h1>Combo Boxes</h1>

<div class="example">

    <div id="simpleCombo"></div>
</div>

</body>
</html>

**vollchraZ** · 24 Mar 2011 9:52 AM

Hi mzadig,

set the root property for the json example in the reader config like:

Code:

reader: {
  type: "json",
  root: "states"
}

I never used the xml reader before, so I can't tell you anything about it.

**mzadig** · 24 Mar 2011 10:24 AM

Hi vollchraZ,

Adding the root: config allows the items to display..... but... when I try to select an item it does not populate in the combo box. Am I missing a config property.

thanks,

mike

**vollchraZ** · 24 Mar 2011 10:50 AM

You have to set the queryMode property to local.

**evant** · 24 Mar 2011 4:44 PM

The JSON you're using is invalid in several ways, the following worked fine for me:

Code:

Ext.onReady(function(){
    Ext.tip.QuickTips.init();
    
    // Define the model for a State
    Ext.regModel('State', {
        fields: [{
            type: 'string',
            name: 'name'
        }]
    });
    
    // The data for all states
    var states = [{
        "abbr": "AL",
        "name": "Alabama",
        "slogan": "The Heart of Dixie"
    }, {
        "abbr": "AK",
        "name": "Alaska",
        "slogan": "The Land of the Midnight Sun"
    }];
    
    // The data store holding the states; shared by each of the ComboBox examples below
    var store = new Ext.data.Store({
        model: 'State',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
                root: 'states',
                type: 'json'
            }
        }
    });
    
    // Simple ComboBox using the data store
    var simpleCombo = new Ext.form.ComboBox({
        fieldLabel: 'ComboTest1',
        renderTo: document.body,
        displayField: 'name',
        valueField: 'abbr',
        width: 500,
        labelWidth: 130,
        store: store,
        queryMode: 'remote',
        typeAhead: true
    });
});

Code:

{
    "states": [
        {
            "abbr": "AL",
            "name": "Alabama",
            "slogan": "The Heart of Dixie"
        },
        {
            "abbr": "AK",
            "name": "Alaska",
            "slogan": "The Land of the Midnight Sun"
        }
        
    ]
}

**mzadig** · 25 Mar 2011 4:41 AM

Evant,

Thank you. You response regarding my malformed JSON got me on the right track. I now have the combo box working with both JSON and XML remote calls.

VollchraZ's response got the selection part working properly.

Combo Box will not load from remote json or xml calls

Thread Tools

Search Thread

Display

Combo Box will not load from remote json or xml calls

Combo Box will not load from remote json or xml calls

Problem Solved- Thanks!

Problem Solved- Thanks!

Similar Threads

Error when load combo in remote mode

Remote load combo box & multiselect

Combo box auto complete- Remote load

httpproxy with JSON reader how to submit for parms along with ds.load calls?