在网格Issu中加载XML文件中的动态数据 [英] Loading dynamic data from xml file in grid Issu
本文介绍了在网格Issu中加载XML文件中的动态数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Ext.ux.touch.grid库在我的父视图中集成表视图。但我无法在表格中显示数据。我的代码如下：
网格视图：
define（'RasovaiApp.view.Grid'，{
extend：'RasovaiApp.Ext.ux.touch.grid.List'，
xtype：'grid-grid'，
id：'栅格'，
要求：[
'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 '
]，
商店：['RasovaiApp.store.CalFieldsStore']，
配置：{
title：'Grid'，
store：true，
列：[
{
header：'Country'，
dataIndex：'country'，
宽度：'10％'，
高度：20，
编辑器：{
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'
$ b header：'Teacher'，
dataIndex：'teacher'，
width：'15％'，
身高：20，
编辑：{
xtype：'textfield'
}
}，
{
header：'Contact'，
dataIndex：'contact'，
width：'15％'，
height：20，
编辑器：{
xtype：'textfield'
}
}
]，
特性：[
{
ftype：'RasovaiApp.Ext.ux.touch.grid.feature.Sorter'，
launchFn：'initialize'
}，
{
ftype：'RasovaiApp.Ext.ux.touch.grid.feature.Editable'，
launchFn：'initialize'
}
]
}，
applyStore：function（）{
返回新的RasovaiApp.store.CalFieldsStore（）;
}
}）;
商店类别：
Ext.define（'RasovaiApp.store.CalFieldsStore'，{
extend：'Ext.data.Store'，
xtype：'stores'，
requires：[
'RasovaiApp.model.Calendarfields'
]，
配置：{
autoLoad：true，
模型：'RasovaiApp.model .Calendarfields'，
grouper：{
groupFn：function（record）{
return record.get（'calendar'）;
}
}
$ / code $ / pre
$ b $ p $} $;
模型类：
Ext.define（'RasovaiApp.model.Calendarfields'，{
extend：'Ext.data.Model'，
config：{
fields：[
'country'，
'location'，
'月'，
'日期'，
'老师'，
'联系'
]，
代理：{
类型： ajax'，
url：'http://127.0.0.1/calfield1.xml'，
阅读器：{
类型：'xml'，
rootProperty：'calendars'，
记录：'日历'
}
}
}
我可以显示表头，但是当我从xml文件中获取数据时，它不会显示表中的数据，但是当我尝试显示静态数据，它显示在表中。
谢谢
解决方案我找到了确切的问题。问题在于我将商店设置为网格视图而没有获取回调数据，因此数据在设置为视图时不存在。
Grid.js中的以下更改将起作用：
Ext.define（'RasovaiApp.view。 Grid'，{
extend：'RasovaiApp.Ext.ux.touch.grid.List'，
xtype：'grid-grid'，
id：'grids'，
要求：[
'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'），
列：[
{
header：'Country'，
dataIndex：'country'，
width：'10％'，
height：20，
编辑器：{
xtype：'textfield'
}
}，
{
标题：'Month'，
dataIndex：'mon th'，
width：'15％'，
height：20，
editor：{
xtype：'textfield'
}
}，
{
header：'Location'，
dataIndex：'location'，
width：'20％'，
height：20，
editor：{
xtype：'textfield'
}
}，
{
header：'Date'，
dataIndex：'date'，
width ：'10％'，
高度：20，
编辑器：{
xtype：'textfield'
}
}，
{
header：'Teacher'，
dataIndex：'teacher'，
width：'15％'，
height：20，
editor：{
xtype：'textfield '
}
}，
{
header：'Contact'，
dataIndex：'c ontact'，
width：'15％'，
height：20，
editor：{
xtype：'textfield'
}
}
$，
特性：[
{
ftype：'RasovaiApp.Ext.ux.touch.grid.feature.Sorter'，
launchFn：'initialize'
}，
{
ftype：'RasovaiApp.Ext.ux.touch.grid.feature.Editable'，
launchFn：'initialize'
}
]
}
}）;
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
解决方案 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'
}
]
}
});
这篇关于在网格Issu中加载XML文件中的动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
