7

表示するデータがない場合、グリッドに「データがありません」というメッセージが表示されますが、デフォルトではグリッドの左上隅に表示されます。このメッセージをグリッド ビューの中央に配置します。コードは次のとおりです。

viewConfig : { 
    deferEmptyText: false,
    emptyText: 'No data Available'
}

私はこのようなスタイルをオーバーライドしてみました:

.x-grid-empty {
    text-align: center;
    padding-top: 130px !important;
}

しかし、うまくいきませんでした。

4

4 に答える 4

6

HTML を emptyText 定義で使用することもできることに注意してください。これは、いくつかの優れた CSS と一致すると、非常に見栄えがよくなります。

        viewConfig: {
            preserveScrollOnRefresh: true,
            deferEmptyText         : true,
            emptyText              : '<div class="grid-data-empty"><div data-icon="/" class="empty-grid-icon"></div><div class="empty-grid-headline">Nothing to see here</div><div class="empty-grid-byline">There are no records to show you right now. There may be no records in the database or your filters may be too tightly defined.</div></div>'
        }

グリッドの条件に応じて emptyText を変更することもできます:

    me.store.on( 'load', function( s, recs ){
        if (recs.length == 0) me.getView().emptyText = me.storeEmptyText;
        else me.getView().emptyText = me.filtersEmptyText;
        me.getView().refresh();
    } );

上記は、ストアに実際にデータがないかどうか、または表示するレコードがなくなるまでフィルターを適用したかどうかに基づいて、 emptyText を変更します。これを使用して、メッセージを次のように変更します。

「表示するコンテンツはありません。」

に：

「あなたのフィルターは少し厳しすぎます。少し緩めてみてください。」

表示するレコードがない場合にグリッド内の空のテキストをスタイルするだけの簡単な例

于 2014-10-17T16:40:59.660 に答える
1 
var grid = Ext.create('Ext.grid.Panel', {
    viewConfig: { emptyText: 'no_data' },
    store: ...,
    columns:[
                ....
    ],
    width: ...,
    renderTo: Ext.getBody()
});
于 2013-10-10T08:45:09.403 に答える