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 : id.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,
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,
text align center
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元素了。
如图：
实现过程如下：
var ElementById("grid_jglb");
var tables = ElementsByTagName("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;";
}
}
};
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。