Loading XML values into ComboBox

[gameboy87]

I have read all the documentation related to loading the values into Combo,XML reader....I really got frustrated....May I know What I went wrong in this code ?

Ext.onReady(function(){

Ext.define('combo_m',{
  extend:'Ext.data.Model',
  fields:[
     { name:'city', mapping:'cityname > city'}
  ]
});


var store_combo = Ext.create('Ext.data.Store',{
                    model:'combo_m',
                    autoLoad:true,
                    proxy:{
                       type:'ajax',
                       url:'data.xml',
                       reader:{
                            type:'xml',
                            record:'cityname'
                       }
                    }
});


var combo = new Ext.form.ComboBox({
  fieldLabel:'City',
  labelWidth:40,
  name:'somedata',
  id:'somedata',
  queryMode:'local',
  triggerAction:'all',
  store:store_combo,
  renderTo:document.body,
  //typeAhead:true,
  displayField:'name',
  valueField:'name'
 });



});

And this is my XML file,

<?xml version="1.0" encoding="UTF-8"?>
 <cityname>
  <city>Bangalore</city>
  <city>Chennai</city>
  <city>Mysore</city>
  <city>Mumbai</city>
  <city>Delhi</city>
  <city>Kolkata</city>
  <city>Pune</city>
  <city>Coimbatore</city>
 </cityname>

The combo is not loading with this values. Please help.

[droessner]

Your displayField and valueField is 'name', but your store does not contain any field 'name'. You'll want to change these to 'city'. Since you define cityname as your record and city as the field of that record, you should remove the mapping in the field definition. Your XML is also not defined correctly. You can't have multiple 'city' fields within your 'cityname' record. Here's a working example:

Ext.onReady(function() {
    Ext.define('combo_m', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'city'
        }]
    });


    var store_combo = Ext.create('Ext.data.Store', {
        model: 'combo_m',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'data.xml',
            reader: {
                type: 'xml',
                record: 'cityname'
            }
        }
    });


    var combo = new Ext.form.ComboBox({
        fieldLabel: 'City',
        labelWidth: 40,
        name: 'somedata',
        id: 'somedata',
        queryMode: 'local',
        triggerAction: 'all',
        store: store_combo,
        renderTo: document.body,
        //typeAhead:true,
        displayField: 'city',
        valueField: 'city'
    });
});

<?xml version="1.0" encoding="UTF-8"?>
<data>
 <cityname>
  <city>Bangalore</city>
 </cityname>
 <cityname>
  <city>Chennai</city>
 </cityname>
 <cityname>
   <city>Mysore</city>
 </cityname>
 <cityname>
  <city>Mumbai</city>
 </cityname>
 <cityname>
  <city>Delhi</city>
 </cityname>
 <cityname>
  <city>Kolkata</city>
 </cityname>
 <cityname>
  <city>Pune</city>
 </cityname>
 <cityname>
  <city>Coimbatore</city>
 </cityname>
</data>

[gameboy87]

Thanks a lot droessner. That was much Helpful. I am guessing how to read the records with this config.

<?xml version="1.0" encoding="UTF-8"?> 
<cityname>  
<city>Bangalore</city> 
 <city>Chennai</city>  
<city>Mysore</city> 
 <city>Mumbai</city> 
 <city>Delhi</city>
  <city>Kolkata</city>
  <city>Pune</city> 
 <city>Coimbatore</city>
 </cityname>