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

Question

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

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

我尝试了这样的覆盖样式：

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

但它没有用。

score 6 · Accepted Answer

请注意，您还可以在 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。我们使用它来更改消息，例如：

“没有内容可以给你看。”

至：

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

score 3 · Accepted Answer

要完成这项工作，您必须在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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

deferEmptyText: false, viewConfig: { emptyText: '没有可用数据' }

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

4 回答 4

Related

Reference