如何将CSS应用于ExtJS网格的emptytext？

Question

网格的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>'

- Gihan Lasita

Answer 1

来自Sencha论坛上的这篇帖子：

代码：

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

CSS：

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

- Diodeus - James MacFarlane

---

已经尝试过了，问题是.x-grid-empty没有应用。可能是ExtJS4在emptytext上没有这个类。 - Gihan Lasita

Answer 2

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

你应该定义 emptyText 的 CSS 规则。这个自定义渲染器应用于特定的列。

- user12384512