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

2012年11月30日作者：

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

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;"; 
} 
} 
}; 
} 
}