Populating Combo using XML as data source

[bunty]

Below is the XML format:

<customers>	<customer>
		<name>Customer1</name>
	</customer>
	<customer>
		<name>Customer2</name>
	</customer>
	<customer>
		<name>Customer3</name>
	</customer>
</customers>

I want to load the customer names in a combo reading the above XML file. Below is the code I tried:

Ext.require('Ext.tab.*');

Ext.define('Customer',{
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' }
    ]
});


var customerStore = Ext.create('Ext.data.XmlStore', {
	autoLoad: true,
    url: '/XML/xml/customer.xml',
    fields: ['name'],
    record: 'customer'
});


Ext.define('CustomerCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.customercombo',
    allowBlank: false,
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name',
    store: customerStore
});


Ext.onReady(function(){
	Ext.tip.QuickTipManager.init();
    Ext.widget('panel', {
    	renderTo: 'pan1',
        title: 'Basic Panel',
        width:600,
        height:100,
        defaults: {
            bodyPadding: 10,
            border: false,
            xtype: 'panel',
            layout: 'anchor'
        },
    	layout: 'hbox',
    	pack: 'end',
        items: [{
            	  fieldLabel: 'Customer',
            	  xtype: 'customercombo',
            	  width: 234,
            	  margin: '5 5 5 5'
               }]            
    });  
});

But the code is not working. The Drop down is empty and an exception is thrown in Chrome console:

Uncaught TypeError: Cannot call method 'indexOf' of undefined

Please help

Regards,

[mitchellsimoens]

Try this:

Ext.define('Customer', {
    extend : 'Ext.data.Model',

    fields : [
        { name : 'name', type : 'string' }
    ]
});

Ext.define('CustomerCombo', {
    extend       : 'Ext.form.field.ComboBox',
    alias        : 'widget.customercombo',

    allowBlank   : false,
    queryMode    : 'local',
    valueField   : 'id',
    displayField : 'name'
});

Ext.onReady(function() {

    var customerStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model    : 'Customer',
        proxy    : {
            type   : 'ajax',
            url    : '/XML/xml/customer.xml',
            reader : {
                type   : 'xml',
                record : 'customer'
            }
        }
    });

    Ext.widget('panel', {
        renderTo : 'pan1',
        title    : 'Basic Panel',
        width    : 600,
        height   : 100,
        defaults : {
            bodyPadding : 10,
            border      : false,
            xtype       : 'panel',
            layout      : 'anchor'
        },
        layout   : 'hbox',
        pack     : 'end',
        items    : [
            {
                fieldLabel : 'Customer',
                xtype      : 'customercombo',
                width      : 234,
                margin     : '5 5 5 5',
                store      : customerStore
            }
        ]
    });

});

[bunty]

Thanks for the help, its woking fine.

I modified the xml with namespaces for each and every element like this:

<c:customers>    <e:customer>
		<p:name>Customer1</p:name>
	</e:customer>
	<e:customer>
			<p:name>Customer2</p:name>
	</e:customer>
	<e:customer>
			<p:name>Customer3</p:name>
	</e:customer>
</c:customers>

And modified the code like this:

Ext.define('Customer', {    extend : 'Ext.data.Model',


    fields : [
        { name : 'p:name', type : 'string' }
    ]
});


Ext.define('CustomerCombo', {
    extend       : 'Ext.form.field.ComboBox',
    alias        : 'widget.customercombo',


    allowBlank   : false,
    queryMode    : 'local',
    valueField   : 'id',
    displayField : 'p:name'
});


Ext.onReady(function() {


    var customerStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model    : 'Customer',
        proxy    : {
            type   : 'ajax',
            url    : '/XML/xml/customer.xml',
            reader : {
                type   : 'xml',
                record : 'e:customer'
            }
        }
    });


    Ext.widget('panel', {
        renderTo : 'pan1',
        title    : 'Basic Panel',
        width    : 600,
        height   : 100,
        defaults : {
            bodyPadding : 10,
            border      : false,
            xtype       : 'panel',
            layout      : 'anchor'
        },
        layout   : 'hbox',
        pack     : 'end',
        items    : [
            {
                fieldLabel : 'Customer',
                xtype      : 'customercombo',
                width      : 234,
                margin     : '5 5 5 5',
                store      : customerStore
            }
        ]
    });


});

But did not work again.

Initially thought that with or without namespace, the code should be same by changing the names only but its not like that

Any help on this please?

[bunty]

any inputs on this?