如何将 css 应用于 extjs 网格空文本？答案

【问题标题】：how to apply css to extjs grid emptytext?如何将 css 应用于 extjs 网格空文本？
【发布时间】：2011-07-29 17:41:11
【问题描述】：

是否有任何特殊类应用于网格的emptyText？我试图用 Firebug 检查元素，发现只有这个：

<div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default
 x-unselectable" role="presentation" tabindex="-1" style="-moz-user-select: none; width: 398px; height: 150px;">
There are no items to show in this view.
</div>

似乎没有特殊的类来识别和应用 CSS 到 emptyText。有什么方法可以添加一个类，或者有什么特殊的方法来设置空文本的样式吗？

注意：

我这样做了，对我来说效果很好：

emptyText: '<div style="width:auto; text-align:center; padding-top:50px; color:red; font-weight:bold;">There are no items to show in this view.</div>'

【问题讨论】：

标签： javascript css extjs extjs4

【解决方案1】：

columns:[{
                header: 'columnName',
                dataIndex: 'dataIndex',
                renderer: function(value, metaData, record, rowIndex) {
                      if (value == '')
                        metaData.tdCls = 'emptyText'; 
                }
}]

你应该定义 emptyText css 规则。此自定义渲染器应用于特定列

【讨论】：

【解决方案2】：

来自 Sencha 论坛上的this post：

代码：

var grid = new Ext.grid.GridPanel({
  cls: 'my-grid',
  ...
});

CSS：

.my-grid .x-grid-empty {text-align: center; padding-top: <nnn>px;}

【讨论】：

已经试过一个问题是 .x-grid-empty 不适用。也许 extjs4 在 emptytext 上没有那个类