ExtJs GridPanel表格文本垂直居中实现方法

数码系统

相机 win10

测评 win11

手机智车

华为 Tesla

小米理想

苹果蔚来

游戏软件

LOL 抖音

原神微信

当前位置：首页

前端开发

ExtJs GridPanel表格文本垂直居中实现方法

热心网友时间：2026-06-10

转载

ExtJSGridPanel表格文本垂直居中通过监听数据加载事件实现：在事件回调中遍历所有td元素，统一设置CSS样式text-align:center、line-height:130px和vertical-align:center。由于GridPanel数据加载后DOM会刷新，监听事件可在每次加载后重新应用样式，确保垂直居中效果持续。line-height

先看最终要实现的效果：

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统一赋予样式 `'text-align:center;line-height: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");// 获取表格内所有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");// 遍历每一行
for(var i = 0;i < trs.length;i++){
var tds=trs[i].getElementsByTagName("td");// 遍历每一行的所有单元格
for(var j = 1;jtds[j].style.cssText="width:202px;text-align:center;line-height:130px;vertical-align:center;";
}
}
};
}
}

核心思路是：通过 `getStore().on('load')` 监听表格数据加载完毕事件，接着循环遍历所有行及所有单元格，逐一定制样式。值得留意的是，循环从 `j=1` 开始，目的是跳过第一列（通常为复选框列），这一细节在实际开发中非常实用。