extjs dataview issue - extjs

Question

I am creating a report making tool. I will be dragging/resizing panels inside a panel container. When i click save button, i am passing the size and position of panels and based on that an xhtml report will be generated. I have a dataview on the left side. Each time a report is generated i need to show that report on dataview. Without using any database how this can be done? Any help would be appreciated.

Answer 1

Do one thing, create a store with fields "size", "report_data" and "position".
var store = new Ext.data.JsonStore({
id : 'panel_store',
fields : ['size', 'position', 'report_data']
});
Create a template for each report (some other data can be added here):
var template = new Ext.XTemplate(
'<div class="reports_container"><tpl for=".">',
'<div class="report">{report_data}</div>','</tpl></div>'
);
template.compile();
Create a dataview with template and store:
var dataView = new Ext.DataView({
itemSelector : 'div.report', // Required
style : 'overflow:auto',
multiSelect : true,
store : store,
tpl : template
});
Add the dataview in you main panel:
var mainPanel = new Ext.Panel({
id : 'main_panel',
items : dataView
});
Whenever you generate a new report, create a new Ext.Record:
var ReportRecord = Ext.data.Record.create([
{ name: 'size' },
{ name: 'position' },
{ name: 'record_type' }
]);
var newRec = new ReportRecord({
size : '100',
position : 'some position',
report_data : 'some data'
});
store.add(newRec);
store.on('add', function() {
dataView.refresh();
}, this);
Is this what you wanted? However, this code isn't tested anywhere.