业务场景，需要实现最终效果图如下：
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 var tablev=tables[k];
if(tablev.classname==x-grid3-row-table){
var trs=tables[k].getelementsbytagname(tr);//找到每个tr
for(var i = 0;i var tds=trs[i].getelementsbytagname(td);//找到每个td
for(var j = 1;jtds[j].style.csstext=width:202px;text-align:center;line-height:130px;vertical-align:center;;
}
}
};
}
}