Javascript ExtJS网格未从Ext.data.XmlStore加载数据
我有一个网格,我正试图从一个XmlStore填充它,它是从一个Xml字符串填充的。到目前为止,存储似乎可以加载XML,但我无法让网格加载存储。(即grid.getStore().getCount()始终为0Javascript ExtJS网格未从Ext.data.XmlStore加载数据,javascript,extjs,grid,xmlstore,Javascript,Extjs,Grid,Xmlstore,我有一个网格,我正试图从一个XmlStore填充它,它是从一个Xml字符串填充的。到目前为止,存储似乎可以加载XML,但我无法让网格加载存储。(即grid.getStore().getCount()始终为0 // create the Data Stores for use by the grid Ext.define('InterfaceModel', { extend: 'Ext.data.Model', fields: [ { name: 'id', map
// create the Data Stores for use by the grid
Ext.define('InterfaceModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', mapping: 'id' },
{ name: 'InterfaceName', mapping: 'InterfaceName' },
{ name: 'TX_OCTETS', mapping: 'TX_OCTETS' },
{ name: 'TX_BAD_OCTETS', mapping: 'TX_BAD_OCTETS' },
{ name: 'TX_FRM', mapping: 'TX_FRM' },
{ name: 'TX_BAD_FRM', mapping: 'TX_BAD_FRM' },
{ name: 'TX_MCAST', mapping: 'TX_MCAST' },
{ name: 'TX_BCAST', mapping: 'TX_BCAST' },
{ name: 'TX_PAUSE', mapping: 'TX_PAUSE' }
],
idProperty: 'id'
});
我的XML如下所示:
var gridData = '<?xml version="1.0" encoding="UTF-8"?> <Interfaces> <Interface> <id>1</id> <InterfaceName>GMAC1</InterfaceName> <TX_OCTETS>123234</TX_OCTETS> <TX_BAD_OCTETS>234</TX_BAD_OCTETS> <TX_FRM>234234</TX_FRM> <TX_BAD_FRM>2341</TX_BAD_FRM> <TX_MCAST>23</TX_MCAST> <TX_BCAST>56</TX_BCAST> <TX_PAUSE>8</TX_PAUSE></Interface> <Interface> <id>2</id> <InterfaceName>GMAC2</InterfaceName> <TX_OCTETS>123234</TX_OCTETS> <TX_BAD_OCTETS>234</TX_BAD_OCTETS> <TX_FRM>234234</TX_FRM> <TX_BAD_FRM>2341</TX_BAD_FRM> <TX_MCAST>23</TX_MCAST> <TX_BCAST>56</TX_BCAST> <TX_PAUSE>8</TX_PAUSE></Interface></Interfaces>';
var gridDataXml = (new DOMParser()).parseFromString(gridData,'text/xml');
console.log ('xml', gridDataXml); // everything looks fine
createGrid: function () {
var me = this;
return {
id: 'eioaGrid',
xtype: 'grid',
border: true,
store: this.eioaGridStore,
columns: [{
header: 'Interface',
dataIndex: 'InterfaceName',
align: 'center',
sortable: true,
tooltip: 'Axxia Interface'
}, {
text: 'OCTETS',
sortable: false,
width: 100,
tooltip: 'Total number of octets in all frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_OCTETS',
tooltip: 'Transmitted'
}]
}, {
text: 'BAD OCTETS',
sortable: false,
width: 100,
tooltip: 'Total number of octets in all bad frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BAD_OCTETS',
tooltip: 'Transmitted'
}]
}, {
text: 'FRAMES',
sortable: false,
width: 100,
tooltip: 'Total number of frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_FRM',
tooltip: 'Transmitted'
}]
}, {
text: 'BAD FRAMES',
sortable: false,
width: 100,
tooltip: 'Total number of bad frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BAD_FRM',
tooltip: 'Transmitted'
}]
}, {
text: 'MULTICAST',
sortable: false,
width: 100,
tooltip: 'Multicast Frames: good non-pause frames with a multicast destination address which is not the broadcast address.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_MCAST',
tooltip: 'Transmitted'
}]
}, {
text: 'BROADCAST',
sortable: false,
width: 100,
tooltip: 'Broadcast Frames: good frames with the broadcast destination address.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BCAST',
tooltip: 'Transmitted'
}]
}, {
text: 'PAUSE',
sortable: false,
width: 100,
tooltip: 'Pause Frames: pause frames internally generated by the MAC.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_PAUSE',
tooltip: 'Transmitted'
}]
}]
};
}
然后将解析后的XML DOM加载到存储中:
eioaGridStore.loadRawData(gridDataXml);
如果我在存储上获取count(),它会正确地响应2
从Web Inspector查看存储时显示2个数组(我希望是网格中的行)(请原谅格式)
我的网格组件如下所示:
var gridData = '<?xml version="1.0" encoding="UTF-8"?> <Interfaces> <Interface> <id>1</id> <InterfaceName>GMAC1</InterfaceName> <TX_OCTETS>123234</TX_OCTETS> <TX_BAD_OCTETS>234</TX_BAD_OCTETS> <TX_FRM>234234</TX_FRM> <TX_BAD_FRM>2341</TX_BAD_FRM> <TX_MCAST>23</TX_MCAST> <TX_BCAST>56</TX_BCAST> <TX_PAUSE>8</TX_PAUSE></Interface> <Interface> <id>2</id> <InterfaceName>GMAC2</InterfaceName> <TX_OCTETS>123234</TX_OCTETS> <TX_BAD_OCTETS>234</TX_BAD_OCTETS> <TX_FRM>234234</TX_FRM> <TX_BAD_FRM>2341</TX_BAD_FRM> <TX_MCAST>23</TX_MCAST> <TX_BCAST>56</TX_BCAST> <TX_PAUSE>8</TX_PAUSE></Interface></Interfaces>';
var gridDataXml = (new DOMParser()).parseFromString(gridData,'text/xml');
console.log ('xml', gridDataXml); // everything looks fine
createGrid: function () {
var me = this;
return {
id: 'eioaGrid',
xtype: 'grid',
border: true,
store: this.eioaGridStore,
columns: [{
header: 'Interface',
dataIndex: 'InterfaceName',
align: 'center',
sortable: true,
tooltip: 'Axxia Interface'
}, {
text: 'OCTETS',
sortable: false,
width: 100,
tooltip: 'Total number of octets in all frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_OCTETS',
tooltip: 'Transmitted'
}]
}, {
text: 'BAD OCTETS',
sortable: false,
width: 100,
tooltip: 'Total number of octets in all bad frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BAD_OCTETS',
tooltip: 'Transmitted'
}]
}, {
text: 'FRAMES',
sortable: false,
width: 100,
tooltip: 'Total number of frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_FRM',
tooltip: 'Transmitted'
}]
}, {
text: 'BAD FRAMES',
sortable: false,
width: 100,
tooltip: 'Total number of bad frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BAD_FRM',
tooltip: 'Transmitted'
}]
}, {
text: 'MULTICAST',
sortable: false,
width: 100,
tooltip: 'Multicast Frames: good non-pause frames with a multicast destination address which is not the broadcast address.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_MCAST',
tooltip: 'Transmitted'
}]
}, {
text: 'BROADCAST',
sortable: false,
width: 100,
tooltip: 'Broadcast Frames: good frames with the broadcast destination address.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BCAST',
tooltip: 'Transmitted'
}]
}, {
text: 'PAUSE',
sortable: false,
width: 100,
tooltip: 'Pause Frames: pause frames internally generated by the MAC.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_PAUSE',
tooltip: 'Transmitted'
}]
}]
};
}
稍后,我通过网格的存储获取getCount(),它返回为空
console.log('grid store count', Ext.getCmp('eioaGrid').store.getCount());
有什么想法吗?已经被难倒了几天了,我快疯了!谢谢。只是一个猜测,因为我没有加载你的代码,但是可能会从商店定义中删除自动加载,因为你是手动操作的?只是一个猜测,因为我没有加载你的代码,但是可能会从商店定义中删除自动加载,因为你是手动操作?我刚找到它…我在设置网格存储时对该.eioaGridStore的引用:不在范围内(未定义)…一切都正常。我刚找到它…我在设置网格存储时对该.eioaGridStore的引用:不在范围内(未定义)…一切都正常