Loading dynamic data from xml file in grid Issu

问题

I am trying to integrate a table view in my parent view using "Ext.ux.touch.grid" library. But I am unable to display the data in the table. My code are as follows:

Grid View:

 Ext.define('RasovaiApp.view.Grid', {
extend : 'RasovaiApp.Ext.ux.touch.grid.List',
xtype  : 'grid-grid',
id: 'grids',


requires : [
    'RasovaiApp.Ext.ux.touch.grid.feature.Feature',
    'RasovaiApp.Ext.ux.touch.grid.feature.Editable',
    'RasovaiApp.Ext.ux.touch.grid.feature.Sorter',
    'Ext.field.Number',
    'RasovaiApp.store.CalFieldsStore'
],


    store: ['RasovaiApp.store.CalFieldsStore'],


config : {
    title    : 'Grid',
    store    : true,
    columns  : [
        {
            header    : 'Country',
            dataIndex : 'country',
            width     : '10%',
            height    : 20,
            editor    : {
                xtype  : 'textfield'
            }
        },
        {
            header    : 'Month',
            dataIndex : 'month',
            width     : '15%',
            height    : 20,
            editor    : {
                xtype  : 'textfield'
            }
        },
        {
            header    : 'Location',
            dataIndex : 'location',
            width     : '20%',
            height    : 20,
            editor    : {
                xtype  : 'textfield'
            }
        },
        {
            header    : 'Date',
            dataIndex : 'date',
            width     : '10%',
            height    : 20,
            editor    : {
                xtype  : 'textfield'
            }
        },
        {
            header    : 'Teacher',
            dataIndex : 'teacher',
            width     : '15%',
            height    : 20,
            editor    : {
                xtype  : 'textfield'
            }
        },
        {
            header    : 'Contact',
            dataIndex : 'contact',
            width     : '15%',
            height    : 20,
            editor    : {
                xtype  : 'textfield'
            }
        }
    ],
    features : [
        {
            ftype    : 'RasovaiApp.Ext.ux.touch.grid.feature.Sorter',
            launchFn : 'initialize'
        },
        {
            ftype    : 'RasovaiApp.Ext.ux.touch.grid.feature.Editable',
            launchFn : 'initialize'
        }
    ]
},
applyStore : function() {
    return new RasovaiApp.store.CalFieldsStore();
}
});

Store class:

Ext.define('RasovaiApp.store.CalFieldsStore',{
    extend: 'Ext.data.Store',
    xtype: 'stores',
    requires : [
        'RasovaiApp.model.Calendarfields'
    ],


config : {
    autoLoad: true,
    model : 'RasovaiApp.model.Calendarfields',
    grouper  : {
        groupFn : function (record) {
            return record.get('calendar');
        }
    }


}

});

Model class:

Ext.define('RasovaiApp.model.Calendarfields', {
extend : 'Ext.data.Model',


config : {
    fields : [
        'country',
        'location',
        'month',
        'date',
        'teacher',
        'contact'
    ],
    proxy : {
        type   : 'ajax',
        url: 'http://127.0.0.1/calfield1.xml',
        reader : {
            type         : 'xml',
            rootProperty : 'calendars',
            record       : 'calendar'
        }
    }
}

});

I can display the header of the table but it does not display the data in the table when I fetch the data from xml file, but when I try to display the static data, it displays in the table.

Thanks

回答1:

I figured out the exact problem. The problem was that I setting the store to the Grid view without getting the call back data, so the data was not present while it is set to the view. The following change in the "Grid.js" will work:

Ext.define('RasovaiApp.view.Grid', {
extend : 'RasovaiApp.Ext.ux.touch.grid.List',
xtype  : 'grid-grid',
id: 'grids',


requires : [
'RasovaiApp.Ext.ux.touch.grid.feature.Feature',
'RasovaiApp.Ext.ux.touch.grid.feature.Editable',
'RasovaiApp.Ext.ux.touch.grid.feature.Sorter',
'Ext.field.Number',
'RasovaiApp.store.CalFieldsStore'
],

config : {
title    : 'Grid',
store    : true,
store    : Ext.create('RasovaiApp.store.CalFieldsStore'),
columns  : [
    {
        header    : 'Country',
        dataIndex : 'country',
        width     : '10%',
        height    : 20,
        editor    : {
            xtype  : 'textfield'
        }
    },
    {
        header    : 'Month',
        dataIndex : 'month',
        width     : '15%',
        height    : 20,
        editor    : {
            xtype  : 'textfield'
        }
    },
    {
        header    : 'Location',
        dataIndex : 'location',
        width     : '20%',
        height    : 20,
        editor    : {
            xtype  : 'textfield'
        }
    },
    {
        header    : 'Date',
        dataIndex : 'date',
        width     : '10%',
        height    : 20,
        editor    : {
            xtype  : 'textfield'
        }
    },
    {
        header    : 'Teacher',
        dataIndex : 'teacher',
        width     : '15%',
        height    : 20,
        editor    : {
            xtype  : 'textfield'
        }
    },
    {
        header    : 'Contact',
        dataIndex : 'contact',
        width     : '15%',
        height    : 20,
        editor    : {
            xtype  : 'textfield'
        }
    }
    ],
     features : [
    {
        ftype    : 'RasovaiApp.Ext.ux.touch.grid.feature.Sorter',
        launchFn : 'initialize'
    },
    {
        ftype    : 'RasovaiApp.Ext.ux.touch.grid.feature.Editable',
        launchFn : 'initialize'
    }
]

} });

来源：https://stackoverflow.com/questions/16767351/loading-dynamic-data-from-xml-file-in-grid-issu