在网格问题中从xml文件加载动态数据

Loading dynamic data from xml file in grid Issu

本文关键字:文件 加载 动态 数据 xml 网格 问题      更新时间:2023-09-26

我正在尝试使用"Ext.ux.touch "在父视图中集成表视图。电网"图书馆。但是我无法在表中显示数据。我的代码如下:

网格视图:

 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文件中获取数据时,它不显示表中的数据,但当我尝试显示静态数据时,它显示在表中。

谢谢

我弄清楚了问题所在。问题是,我将存储设置为Grid视图而没有获得回调数据,因此数据在设置为视图时不存在。"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'
    }
]

}});