我正在为一些具有一些元数据的数据实现一个小网格编辑器，然后在其中创建一个关联数组，其中包含几个数据点，稍后将用于绘图等。
现在我遇到的问题是将这些数据成功加载到数据存储中，我已经尽可能多地浏览了文档，但是由于我是新手，所以很难找到我正在寻找的东西ExtJS，所以我的搜索术语可能不正确。那么，我应该如何构建我的 ExtJS 数据模型来加载我目前结构化的数据呢？
如果有人可以向我指出正确的文档或工作示例，以便我可以看到我做错了什么，将不胜感激。
到目前为止我写的代码：
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);
});
以及渲染时的样子：
现在，如果我将 DataStores 上的更改还原为此
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
});
我得到以下内容，这更符合我的目标（尽管现在它正在加载包含我的元数据的第二个数据存储，因此更改为想要使用包含所有内容的 1 个存储，以及它的 MongoDB 数据模型）
