extjs dataview问题(extjs dataview issue)

我正在创建一个报告制作工具。 我将在面板容器内拖动/调整面板大小。 当我单击保存按钮时，我正在传递面板的大小和位置，并基于此生成xhtml报告。 我在左侧有一个数据视图。 每次生成报告时，我都需要显示有关数据视图的报告。 不使用任何数据库如何做到这一点？ 任何帮助，将不胜感激。

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.

最满意答案

做一件事，创建一个包含字段“size”，“report_data”和“position”的商店。

var store = new Ext.data.JsonStore({ id : 'panel_store', fields : ['size', 'position', 'report_data'] });

为每个报告创建一个模板（这里可以添加一些其他数据）：

var template = new Ext.XTemplate( '<div class="reports_container"><tpl for=".">', '<div class="report">{report_data}</div>','</tpl></div>' ); template.compile();

使用模板和商店创建数据视图：

var dataView = new Ext.DataView({ itemSelector : 'div.report', // Required style : 'overflow:auto', multiSelect : true, store : store, tpl : template });

在主面板中添加数据视图：

var mainPanel = new Ext.Panel({ id : 'main_panel', items : dataView });

每当生成新报告时，请创建一个新的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);

这是你想要的吗？ 但是，此代码未在任何地方进行测试。

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.

extjs dataview问题(extjs dataview issue)

我正在创建一个报告制作工具。 我将在面板容器内拖动/调整面板大小。 当我单击保存按钮时，我正在传递面板的大小和位置，并基于此生成xhtml报告。 我在左侧有一个数据视图。 每次生成报告时，我都需要显示有关数据视图的报告。 不使用任何数据库如何做到这一点？ 任何帮助，将不胜感激。

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.

最满意答案

做一件事，创建一个包含字段“size”，“report_data”和“position”的商店。

var store = new Ext.data.JsonStore({ id : 'panel_store', fields : ['size', 'position', 'report_data'] });

为每个报告创建一个模板（这里可以添加一些其他数据）：

var template = new Ext.XTemplate( '<div class="reports_container"><tpl for=".">', '<div class="report">{report_data}</div>','</tpl></div>' ); template.compile();

使用模板和商店创建数据视图：

var dataView = new Ext.DataView({ itemSelector : 'div.report', // Required style : 'overflow:auto', multiSelect : true, store : store, tpl : template });

在主面板中添加数据视图：

var mainPanel = new Ext.Panel({ id : 'main_panel', items : dataView });

每当生成新报告时，请创建一个新的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);

这是你想要的吗？ 但是，此代码未在任何地方进行测试。

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.