いくつかのメタデータを含むいくつかのデータ用の小さなグリッドエディターを実装し、その後、グラフ化などに使用されるいくつかのデータポイントを含む関連する配列をその中に実装しています。
今私が抱えている問題は、実際にこのデータをデータストアに正常にロードすることです。できるだけ多くのドキュメントを調べてきましたが、使用するのが初めてなので、探しているものを正確に見つけるのは困難です。 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
});
私が目指していたものは次のとおりです（ただし、メタデータを含む2番目のデータストアをロードしているため、すべてを含む1つのストアを使用するように変更され、それがMongoDBデータモデルになります）
