3
我正在爲一些具有一些元數據的數據實施一個小網格編輯器，然後在其中有一些關聯數組，其中有幾個數據點，稍後將用於繪圖等帶有子陣列的ExtJS DataStore：無法正確加載數據
現在我遇到的問題是實際將這些數據成功加載到數據存儲中，我一直在儘可能多地處理文檔，但很難找到我想要的內容我是使用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);
});
和它是什麼時候呈現出來的圖像等：
現在，如果我恢復我的數據存儲來的變化這
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的數據模型吧）
您正在將'tDataStore'定義爲具有特定字段，但也爲其定義了一個模型（'TargetProfile'），它具有不同的字段。文檔說，你不應該在商店中定義字段，而只能在模型中定義字段。我猜你必須在此爲我提出更多的問題才能更好地幫助你。 – Izhaki
請將您的代碼修改爲問題區域的簡單測試用例。這基本上是你的整個應用程序的轉儲。 – Reimius