带有子数组的ExtJS数据存储：未正确加载数据
我正在为一些包含元数据的数据实现一个小的网格编辑器，然后在其中实现一个关联的数组，其中包含几个数据点，稍后将用于绘图等 现在我面临的问题是如何将这些数据成功地加载到数据存储中，我已经阅读了尽可能多的文档，但很难准确地找到我要查找的内容，因为我不熟悉使用ExtJS，所以我的搜索术语可能不正确。那么，我应该如何构造我的ExtJS数据模型以加载当前构造的数据呢 如果有人能给我指出正确的文档，或者一个工作示例，这样我就可以看到我做得不正确，我将不胜感激 到目前为止，我编写的代码是：带有子数组的ExtJS数据存储：未正确加载数据,extjs,extjs4,Extjs,Extjs4,我正在为一些包含元数据的数据实现一个小的网格编辑器，然后在其中实现一个关联的数组，其中包含几个数据点，稍后将用于绘图等 现在我面临的问题是如何将这些数据成功地加载到数据存储中，我已经阅读了尽可能多的文档，但很难准确地找到我要查找的内容，因为我不熟悉使用ExtJS，所以我的搜索术语可能不正确。那么，我应该如何构造我的ExtJS数据模型以加载当前构造的数据呢 如果有人能给我指出正确的文档，或者一个工作示例，这样我就可以看到我做得不正确，我将不胜感激 到目前为止，我编写的代码是： Ext.requir
Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.grid.Panel',
'Ext.layout.container.Column'
]);
Ext.define('TargetProfile', {
extend : 'Ext.data.Model',
fields : ['profileName', 'description', 'metaData'],
hasMany : {model: 'TargetPoint', name: 'value'}
});
Ext.define('TargetPoint', {
extend : 'Ext.data.Model',
fields : [
{name: 'startTime', type: 'date', dateFormat: 'H:i'},
{name: 'endTime', type: 'date', dateFormat: 'H:i'},
{name: 'targetValue', type: 'int'},
{name: 'comments'}
],
belongsTo : 'TargetProfile'
});
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '/images/s.gif';
Ext.QuickTips.init();
var bd = Ext.getBody();
var tData = ['TestProfile1', 'Testing', 'Just another test',
[
[1, '00:00', '04:00', 27, 'Start of day'],
[2, '04:00', '08:00', 70, 'Ramp up'],
[3, '08:00', '13:00', 55, 'Mid day period'],
[4, '13:00', '18:00', 38, 'Finishing production'],
[5, '18:00', '20:00', 25, 'Shutting down'],
[6, '20:00', '00:00', 20, 'Overnight period']
]
];
var tDataStore = Ext.create('Ext.data.ArrayStore', {
model : 'TargetProfile',
fields : ['profileName', 'description', 'metaData',
[
{name: 'id', type: 'int'},
{name: 'startTime', type: 'date', dateFormat: 'H:i'},
{name: 'endTime', type: 'date', dateFormat: 'H:i'},
{name: 'targetValue', type: 'int'},
{name: 'comments'}
]
],
data : tData
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor : 2,
autoCancel : false,
clicksToEdit : 2,
pluginId : 'rowEditing'
});
rowEditing.on('canceledit', function(me) {
tDataStore.load();
});
var gridForm = Ext.create('Ext.form.Panel', {
id : 'targetForm',
frame : true,
title : 'Target Profile',
bodyPadding : 5,
width : 750,
layout : 'column',
fieldDefaults : {
labelAlign : 'left',
msgTarget : 'side'
},
dockedItems : [{
xtype: 'toolbar',
width: 750,
dock: 'top',
items: [{
xtype: 'button',
text: 'Add Target Point',
iconCls: 'icon-add',
handler: function() {
rowEditing.cancelEdit();
var r = Ext.create('TargetPoint', {
startTime : '00:00',
endTime : '00:00',
targetValue : 0,
comments : ''
});
tDataStore.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
xtype: 'button',
text: 'Save Profile',
iconCls: 'icon-save',
handler: function() {
tDataStore.save()
}
}, {
xtype: 'button',
text: 'Delete Profile',
iconCls: 'icon-delete',
handler: function() {
var selection = gridForm.child('gridpanel').getSelectionModel().getSelection()[0];
if (selection) {
tDataStore.remove(selection);
}
}
}]
}],
items : [{
columnWidth : 0.60,
xtype : 'gridpanel',
store : tDataStore,
plugins : [rowEditing],
height : 400,
title : 'Target Data',
columns : [{
text : 'Start Time',
width : 75,
sortable : true,
dataIndex : 'startTime',
renderer : Ext.util.Format.dateRenderer('H:i'),
editor : new Ext.form.TimeField({format: 'H:i'})
}, {
text : 'End Time',
width : 75,
sortable : true,
dataIndex : 'endTime',
renderer : Ext.util.Format.dateRenderer('H:i'),
editor : new Ext.form.TimeField({format: 'H:i'})
}, {
text : 'Target Value',
width : 75,
sortable : true,
dataIndex : 'targetValue',
editor : new Ext.form.NumberField()
}, {
text : 'Comments',
flex : 1,
sortable : false,
dataIndex : 'comments',
editor : new Ext.form.TextField()
}],
listeners : {
selectionchange: function(model, records) {
if (records[0]) {
this.up('form').getForm().loadRecord(records[0]);
}
}
}
}, {
columnWidth : 0.4,
margin : '0 0 0 10',
xtype : 'fieldset',
title : 'Target Point Details',
defaults : {
width : 240,
labelWidth : 90
},
defaultType : 'textfield',
items : [{
fieldLabel : 'Start Time',
name : 'startTime',
format : 'H:i',
xtype : 'timefield'
}, {
fieldLabel : 'End Time',
name : 'endTime',
xtype : 'timefield',
format : 'H:i'
}, {
fieldLabel : 'Target Value',
name : 'targetValue'
}, {
fieldLabel : 'Comments',
name : 'comments'
}]
}, {
columnWidth : 0.4,
margin : '0 0 0 10',
xtype : 'fieldset',
title : 'Meta Data',
store : tDataStore,
defaults : {
width : 240,
labelWidth : 90
},
defaultType : 'textfield',
items : [{
fieldLabel : 'Profile Name',
name : 'profileName'
}, {
fieldLabel : 'Description',
name : 'description'
}, {
fieldLabel : 'Meta-data',
name : 'metaData',
xtype : 'textarea',
rows : 11
}]
}],
renderTo : bd
});
gridForm.child('gridpanel').getSelectionModel().select(0);
});
var myData = [
[1, '00:00', '04:00', 27, 'Start of day'],
[2, '04:00', '08:00', 70, 'Ramp up'],
[3, '08:00', '13:00', 55, 'Mid day period'],
[4, '13:00', '18:00', 38, 'Finishing production'],
[5, '18:00', '20:00', 25, 'Shutting down'],
[6, '20:00', '00:00', 20, 'Overnight period']
];
var myMetaData = [
['TestProfile1',
'Testing',
'Testing the\ntextarea\nbox'
]
];
var ds = Ext.create('Ext.data.ArrayStore', {
fields : [
{name: 'id', type: 'int'},
{name: 'startTime', type: 'date', dateFormat: 'H:i'},
{name: 'endTime', type: 'date', dateFormat: 'H:i'},
{name: 'targetValue', type: 'int'},
{name: 'comments'}
],
data : myData
});
var ms = Ext.create('Ext.data.SimpleStore', {
fields : ['profileName', 'description', 'metaData'],
data : myMetaData
});
在您的
有许多关联中，name
属性的值表示数据中的变量，Ext应该在该变量中读取一组相关模型。从文档中可以看到以下模型示例：
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'user_id', type: 'int'},
{name: 'name', type: 'string'}
]
});
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
],
// we can use the hasMany shortcut on the model to create a hasMany association
hasMany: {model: 'Product', name: 'products'}
});
Ext将期望用户存储的数据采用以下格式：
[
{
"id" : 1,
"name" : "User 1",
"products" : [
{
"id" : 1,
"user_id" : 1,
"name" : "Product 1"
},
{
"id" : 2,
"user_id" : 1,
"name" : "Product 2"
},
{
"id" : 3,
"user_id" : 1,
"name" : "Product 3"
},
...
]
},
...
]
因此，您只需使用正确的数据及其相关子数据加载其中一个存储，它将自动建立连接，您可以使用User.Products（）
（这将返回一个包含此记录的子数据的存储）直接访问用户的产品您将tDataStore
定义为具有特定字段，但也为其定义具有不同字段的模型（TargetProfile
）。文档说不应该在商店中定义字段，而应该只在模型中定义。我想你必须在这里问我更多的问题，以便更好地帮助你。请修改你的代码，并将其归结为一个简单的问题领域测试用例。这基本上是你整个应用程序的垃圾。