Ext JS 网格显示多个标题答案

【问题标题】：Ext JS grid display multiple headersExt JS 网格显示多个标题
【发布时间】：2012-12-20 21:29:17
【问题描述】：

我想显示一个 Ext JS 网格，每 x 行有多个标题，例如：

[ID | Name | Value]
001|John  | 10,000
002|Amy   | 15,000
[ID | Name | Value]
003|Mike  | 5,000
004|Lisa  | 45,000

ID、名称和值行是标题。

我想知道这是否可能。我检查了基本示例，但找不到任何关于它的信息，只有分组数据，这似乎不是我问题的解决方案。如果可能的话，您能否给我展示一个我将如何使用它的示例。

我能想到的唯一解决方案是在后端拆分数据并为每条数据构建一个网格，但这似乎是一个漫长的过程。

我同时使用 Ext JS 版本 3.2.1 和 4.1，因为我们仍在从版本 3.2.1 转移到 4.1。

提前致谢。

【问题讨论】：

标签： php extjs grid

【解决方案1】：

目前这仅通过简单的配置是不可能的。您需要覆盖Ext.panel.Table 和Ext.view.Table 类并修改表的标记来执行此操作。这将是巨大的努力。作为替代方案，我可以建议检查headerPosition 配置或使用合适的pageSize 设置分页工具栏，如下所示：

var store = Ext.create('Ext.data.Store', {
        pageSize: 50,
        model: 'ForumThread',
        remoteSort: true,
        proxy: {
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        },
        sorters: [{
            property: 'lastpost',
            direction: 'DESC'
        }]
    });
Ext.create('Ext.grid.Panel', {
        //other config
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                text: 'Show Preview',
                pressed: pluginExpanded,
                enableToggle: true,
                toggleHandler: function(btn, pressed) {
                    var preview = Ext.getCmp('gv').getPlugin('preview');
                    preview.toggleExpanded(pressed);
                }
            }]
  });

【讨论】：

感谢您的快速回复。我确实看到了分页示例，不幸的是，我希望所有数据都在同一页面上，因为我在纸/PDF 上打印数据，并且希望在每一页上都有一个标题，这样我就知道我正在阅读什么数据。虽然我会尝试标题配置，但我会保留我的替代方案，尽管我不想那样做。
对于 pdf 生成，最好使用库在服务器端进行（例如，对于 java/c#，您可以使用 apache poi）并将响应作为 application/pdf 标头发送回客户端.对于直接打印，您可以使用商店并生成自己的 html 标记并以表格格式打印数据。

【解决方案2】：

我正在使用以下解决方案http://www.sencha.com/forum/showthread.php?146348-ExtJS-4-Grid-Printer-Plugin 打印具有多个标题的页面。

我改变的一件事是

'<tr>',
  headings,
'</tr>',

进入

'<thead>',
  headings,
'</thead>',

并将其添加到 css 以在每个打印页面上显示标题（适用于 FireFox 和 IE9）：

thead { 
    display: table-header-group; 
}

【讨论】：