How to load data in tagfield from XML

Question

I am trying to load my data from the xmll to tagfield. But I am not sure what is getting failed. Can anybody please suggest me what is going wrong here. I am using store for tagfield which is in different function. I don'y know even not able to do debugging also over there.

Ext.define('MyApp.view.main.List', {
    extend: 'Ext.form.Panel', 
    title: 'Simple Form',
    xtype: 'mainlist',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        xtype: 'tagfield',
        fieldLabel: 'Select a Show',
        store: this.TagStore,
        //displayField: 'show',
        valueField: 'id',
        queryMode: 'local',
        filterPickList: true,
    }],
    renderTo: Ext.getBody(),

    TagStore : function(){
        debugger;
        var combstore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            fields: [{
                name: 'value',
                mapping: "ITEMID",
                type: 'string'
            }, {
                name: 'name',
                mapping: "TITLE",
                type: 'string'
            }],
            proxy: new Ext.data.HttpProxy({
                type: 'ajax',
                actionMethods: {
                    read: "GET"
                },
                url: "localhost/MyApp/resources/data.xml",
                headers: {
                    'Accept': 'application/json; charset=utf-8'
                },
                reader: {
                    type: 'xml',
                    rootProperty: 'R.D.Result'
                },
                extraParams: {
                    strIPXML: strIPXML
                }
            })
        });
    }
});

MyXml :

<EMAIL>
<E TITLE="[email protected]" ITEMID="A" />
<E TITLE="[email protected]" ITEMID="B" />
</EMAIL>

Can anybody help me how to load data through xml in extJS

Answer 1

Just got sometime to play with your issue on sencha fiddle, Here is the basic working code (Atleast seeing tagfield store populated). Used: Ext JS 5.1.1.451 - Gray

    Ext.application({
    name : 'Fiddle',

    launch : function() {
      Ext.define('MyApp.view.main.List', {
    extend: 'Ext.form.Panel', 
    title: 'Simple Form',
    xtype: 'mainlist',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        xtype: 'tagfield',
        fieldLabel: 'Select a Show',
        store:Ext.getStore('TagStore'),
        displayField: 'name',
        valueField: 'value',
        queryMode: 'local',
        filterPickList: true,
    }],
    renderTo: Ext.getBody(),

    TagStore : function(){
        var combstore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            storeId:'TagStore',
            fields: [{
                name: 'value',
                mapping: "@ITEMID",
                type: 'string'
            }, {
                name: 'name',
                mapping: "@TITLE",
                type: 'string'
            }],
            proxy: {
                type: 'ajax',
                url: "data1.xml",
                reader: {
                    type: 'xml',
                    record: 'E',
                    rootProperty:'EMAIL'
                }
            }
        });
        return combstore;
    }
});
var form = Ext.create('MyApp.view.main.List');
form.TagStore();
var store = Ext.getStore('TagStore');
form.child('[xtype=tagfield]').bindStore(store);
    }
});

data1.xml

 <?xml version="1.0" encoding="UTF-8"?>
<EMAIL>
<E TITLE="[email protected]" ITEMID="A" />
<E TITLE="[email protected]" ITEMID="B" />
</EMAIL>