Ext JS的網格顯示多個報頭

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

我使用下述溶液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; 
} 

Answer 2

目前這僅僅通過簡單的配置是不可能的。您需要覆蓋類別的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); 
       } 
      }] 
    });