从网格Issu中的xml文件加载动态数据答案

【问题标题】：Loading dynamic data from xml file in grid Issu从网格Issu中的xml文件加载动态数据
【发布时间】：2013-05-27 20:17:31
【问题描述】：

我正在尝试使用“Ext.ux.touch.grid”库将表格视图集成到我的父视图中。但我无法在表格中显示数据。我的代码如下：

网格视图：

 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();
}
});

商店类：

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');
        }
    }


}

});

模型类：

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'
        }
    }
}

});

我可以显示表头，但是当我从xml文件中获取数据时它不显示表中的数据，但是当我尝试显示静态数据时，它会显示在表中。

谢谢

【问题讨论】：

您是在浏览器中运行它还是作为部署在移动设备中的应用程序运行？当您尝试加载数据时，您是否在控制台中看到任何错误？
我在浏览器中运行它。没有任何错误，但我在创建的表中看不到任何数据，只有标题存在。
您可以在您的商店中添加负载侦听器以在控制台中转储records 吗？你能检查一下 web Inspector 中的Network 选项卡，看看对加载请求的响应是什么？
感谢您的帮助。下面的答案对我有用。

标签： javascript html sencha-touch sencha-touch-2

【解决方案1】：

我找到了确切的问题。问题是我将商店设置为网格视图而没有获取回调数据，因此数据在设置为视图时不存在。 “Grid.js”中的以下更改将起作用：

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'
    }
]

} });

【讨论】：