css - 如何在 Extjs 4.1.3 中更改一行网格单元格的 css

Question

我有一个 ExtJs 网格，它的第一行用作临时行。在网格中，某些列是不可编辑的。我想将第一行(临时)的不可编辑单元格显示为不可编辑。由于该临时行没有任何值，因此如何将这些单元格显示为不可编辑(例如仅使该单元格变灰)

如图所示，我想将这些单元格显示为灰色

Answer 1

显然，这将通过对这些元素应用 CSS 规则来实现。为了定位我们将使用的列 tdCls列配置。

A CSS class names to apply to the table cells for this column.

要定位行，通常是 getRowClass使用方法，但在这种特殊情况下，我认为这将是一种矫枉过正，因为它将在网格的每一行上调用，我们只需要第一行的类。所以我认为要走的路是将类添加到 View 的第一行 viewready事件。

话虽如此，这是解决方案的样子。为所需的列添加一个 tdCls:

{
    text: 'Serial',
    dataIndex: 'serial',
    tdCls: 'serial-column',
    width: 200
}

在第一行添加一个类:

viewConfig: {
    listeners: {
        viewready: function (view) {
            Ext.get(view.getNode(0)).addCls('first-row');
        }
    }
}

然后只需通过 CSS 应用所需的样式:

.first-row .serial-column {
    background: #ccc;
}

这是一个有效的 fiddle :https://fiddle.sencha.com/#view/editor&fiddle/26aq

附言这是关于样式化 ExtJS 网格单元格的非常好的教程:http://skirtlesden.com/articles/styling-extjs-grid-cells