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 に答える