extjs4的grid中列内的格样式(垂直居中、颜色等)

其实说起来也蛮简单。比如某个grid的列

columns: [
                                    {
                                        text: " ",
                                        flex: 1,
                                        dataIndex: 'errorType',
                                        sortable: true,
                                        align: 'center',//该列水平对齐，在这里这么写就够了
                                        renderer: function (value, meta, record) {
                                            meta.tdCls = 'middle';
                                            if (value == "Error" ) {
                                                return "<img  src='..Images/upload-stop.gif' />";
                                            }
                                            if (value == "Warning") {
                                                return "<img  src='..Images/btn-warning.png' />";
                                            }
                                        }

首先columns当中的renderer里面实现方法，然后其中通过第二个参数meta传进来的是个可以做一些事的东西（就这样简单理解也可以……）

它的.style属性可以接收直接写好的样式内容，形如 'overflow:auto;padding: 1px 6px;………………'

这些内容将会传给这个格<td>里面放value的这个div

所以你类似

meta.style="vertical-align: middle",

这样写垂直对齐什么的肯定是没啥意义的，应该搞的是这个td。

新一些的extjs版本在这里是有 .tdStyle可以利用的，但是extjs4没有，只有.tdCls

.tdCls可以传一个css里面定义好的样式名字进去，对于“我想让这列的单元格都垂直对齐”来说

/*grid单元格内容垂直居中*/
.x-grid-cell.middle {
    vertical-align: middle;
}

这样就够了

然后 meta.tdCls = 'middle' 这样就可以把vertical-align: middle;传递给“这个格<td>”