0

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

[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。

提前致谢。

4

2 回答 2

0

目前这仅通过简单的配置是不可能的。您需要覆盖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);
                }
            }]
  });
于 2012-10-19T07:56:38.743 回答
0

我正在使用以下解决方案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; 
}
于 2012-12-20T13:29:17.980 回答