如何在extjs网格面板的中心显示“无数据可用”消息？

Question

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

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。 我们使用它来改变以下内容的消息：

“没有内容可以告诉你。”

至：

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

Answer 2

要使其工作，您必须向网格添加一个cls ，例如cls : 'customgrid' 。 之后，创建以下CSS规则：

.customgrid .x-grid-empty {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
} 

你应该看到你的空文本居中。

这是一个示例代码和一个小提琴：

Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name'],
        data: [],
        proxy: {
            type: 'memory',
            reader: 'array'
        }
    });


    Ext.create('Ext.grid.Panel', {
        margin: 10,
        store: 'simpsonsStore',
        cls: 'customgrid',
        border: true,
        columns: [
            {header: 'Name',  dataIndex: 'name', flex: true}
        ],
        viewConfig: {
            deferEmptyText: false,
            emptyText: 'No data Available',
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

https://fiddle.sencha.com/#fiddle/bvp

Answer 3

var grid = Ext.create('Ext.grid.Panel', {
    viewConfig: { emptyText: 'no_data' },
    store: ...,
    columns:[
                ....
    ],
    width: ...,
    renderTo: Ext.getBody()
});

Answer 4

稍微修改对我有用...通过在viewConfig外放置deferEmptyText。

deferEmptyText：false，viewConfig：{emptyText：'No data Available'}