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

＆＃34;没有向您展示的内容。＆＃34;

为：

＆＃34;您的过滤器有点过于严格。尝试稍微松开它们。＆＃34;

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

稍微修改对我有用...将deferEmptyText放在viewConfig之外。

deferEmptyText：false， viewConfig：{ emptyText：'没有数据可用' }

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

4 个答案: