ExtJs设置GridPanel表格文本垂直居中示例

业务场景，需要实现最终效果图如下：

GridPanel代码如下配置：
复制代码代码如下:
{
xtype : "grid",
id : "grid_jglb",
frame : true,
region : "center",
title : "列表详细信息",
columnLines : true,
loadMask : true,
store : "test_store",
viewConfig : {
forceFit : true,
scrollOffset : 0
},
anchor : "100%",
selModel : new Ext.grid.CheckboxSelectionModel（{
moveEditorOnEnter : false,
width : 28
}）,
columns : [{
xtype : "gridcolumn",
id : "gridcolumn_id",
align : "center",
dataIndex : "COLUMN1",
editable : false,
header : "列名1",
sortable : true,
width : 100
}, {
xtype : "gridcolumn",
align : "center",
dataIndex : "COLUMN2",
editable : false,
header : "列名2",
sortable : true,
width : 100
}, {
xtype : "gridcolumn",
align : "center",
dataIndex : "COLUMN3",
editable : false,
header : "列名3",
sortable : true,
width : 100
}, {
xtype : "gridcolumn",
align : "center",
dataIndex : "COLUMN4",
id : "colidx1",
editable : false,
header : "列名4",
sortable : true,
width : 100
}, {
xtype : "gridcolumn",
align : "center",
dataIndex : "COLUMN5",
hidden : true,
sortable : true
}],
bbar : {
xtype : "paging",
autoShow : true,
displayInfo : true,
pageSize : 10,
store : "test_store"
},
tbar : [{
text : "新增",
iconCls : "icon-add",
id : "btn_mxxz"
}, "-", {
text : "修改",
iconCls : "icon-edit",
id : "btn_mxxg"
}, "-", {
text : "删除",
iconCls : "icon-delete",
id : "btn_mxsc"
}]
}

JsonStore的代码就不贴出来了。接下来看看如何实现垂直居中了。
实现思路：通过获取DOM节点方式，获取到表格内所有的TD，设置需要居中的TD的 cssText的值为："text-align:center;lineheight:130px;vertical-align:center;"
实现依据：Ext中GridPanel容器最终是生成DIV标签来渲染的，其中我们所看到的每一行记录，比如：“测试项，0，20”这一行数据就是被“包”在一个div内的一个table。只要我们根据Ext的生成规则找到该table，就可以操作其td元素了。
如图：

实现过程如下：
复制代码代码如下:
Ext.getCmp（"grid_jglb"）.getStore（）.on（"load",setTdCls）;//设置表格加载数据完毕后，更改表格TD样式为垂直居中
function setTdCls（）{
var gridJglb=document.getElementById（"grid_jglb"）;
var tables = gridJglb.getElementsByTagName（"table"）;//找到每个表格
for（var k = 0; k < tables.length; k++）{
var tableV=tables[k];
if（tableV.className=="x-grid3-row-table"）{
var trs=tables[k].getElementsByTagName（"tr"）;//找到每个tr
for（var i = 0;i < trs.length;i++）{
var tds=trs[i].getElementsByTagName（"td"）;//找到每个TD
for（var j = 1;j<tds.length;j++）{
tds[j].style.cssText="width:202px;text-align:center;line-height:130px;vertical-align:center;";
}
}
};
}
}