Question

我正在尝试使用“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文件中获取数据时它不显示表中的数据，但是当我尝试显示静态数据时，它会显示在表中。

由于

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

} }）;

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

1 个答案: