Results 1 to 4 of 4

Thread: Populating Combo using XML as data source

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default Populating Combo using XML as data source

    Below is the XML format:

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


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

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      1  

    Default

    Try this:

    Code:
    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
                }
            ]
        });
    
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default

    Thanks for the help, its woking fine.

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

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

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

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default

    any inputs on this?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •