extjs - 如何在 extjs 网格面板的中心显示 "No data available "消息？

Question

当没有要显示的数据时，我在网格中显示“无可用数据”消息。但默认情况下，它显示在网格的左上角。我希望此消息位于网格 View 的中心。
这是代码:

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

我尝试通过覆盖这样的风格:

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

但它没有用。

Answer 1

请注意，您还可以在 emptyText 定义中使用 HTML，当与一些漂亮的 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 。我们使用它来改变消息传递，例如:

“没有内容给你看。”

到:

“你的过滤器有点太严格了。试着放松一点。”