extjs dataview issue

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.

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.