Question

我想显示一个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。

提前致谢。

Answer 1

目前，仅通过简单配置就无法做到这一点。您需要覆盖Ext.panel.Table＆amp; 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);
                }
            }]
  });

Answer 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; 
}

Ext JS网格显示多个标题

2 个答案: