extjs 数据视图问题答案

【问题标题】：extjs dataview issueextjs 数据视图问题
【发布时间】：2011-04-28 12:04:17
【问题描述】：

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

【问题讨论】：

这份报告是什么？是生成pdf还是excel表格？或使用 HTML、CSS 等的东西......
你不认为显示代码 sn-p 将有助于提供解决方案吗？
我需要的是实现上述问题的想法

标签： extjs

【解决方案1】：

做一件事，创建一个包含“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);

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

【讨论】：