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

当没有要显示的数据时，我在网格中显示“无数据可用”消息。但默认显示在网格的左上角。我想要这个消息在网格视图的中心。这里是代码：如何在extjs网格面板的中心显示“No data available”消息？

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

我试图压倒一切的风格是这样的：

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

，但没有奏效。

来源

2013-10-09 Gan

嗯，这对我的作品：https://fiddle.sencha.com/#fiddle/sg – existdissolve

@existdissolve然后你应该把它作为答案 – Mchl

对我稍作修改...通过将deferEmptyText放置在viewConfig外部。

deferEmptyText：假的， viewConfig：{ emptyText： '无可用数据' }

来源

2013-10-10 05:25:14 Gan

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

来源

2013-10-10 08:45:09 Eren

请注意，您还可以在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(); 
    });

上面的内容将根据您的商店是否实际上没有数据或者您是否已将过滤器应用到没有更多记录要显示的位置来更改空文本。我们用这个来改变类似的消息：

“没有内容可以显示你。”

到：

“你的过滤器是有点过于严格试着松开他们一点点。”

来源

2014-10-17 16:40:59 slashwhatever

为了使这项工作，你有一个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

来源

2014-10-17 17:33:28

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

回答

相关问题