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

本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中具体实现代码及截图如下感兴趣的朋友可以参考下哈希望对大家有所帮助

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

GridPanel代码如下配置

复制代码 代码如下:
{
xtype : grid
id : grid_jglb
frame : true
region : center
title : 列表详细信息
columnLines : true
loadMask : true
store : test_store
viewConfig : {
forceFit : true
scrollOffset :
}
anchor : %
selModel : new ExtgridCheckboxSelectionModel({
moveEditorOnEnter : false
width :
})
columns : [{
xtype : gridcolumn
id : gridcolumn_id
align : center
dataIndex : COLUMN
editable : false
header : 列名
sortable : true
width :
} {
xtype : gridcolumn
align : center
dataIndex : COLUMN
editable : false
header : 列名
sortable : true
width :
} {
xtype : gridcolumn
align : center
dataIndex : COLUMN
editable : false
header : 列名
sortable : true
width :
} {
xtype : gridcolumn
align : center
dataIndex : COLUMN
id : colidx
editable : false
header : 列名
sortable : true
width :
} {
xtype : gridcolumn
align : center
dataIndex : COLUMN
hidden : true
sortable : true
}]
bbar : {
xtype : paging
autoShow : true
displayInfo : true
pageSize :
store : test_store
}
tbar : [{
text : 新增
iconCls : iconadd
id : btn_mxxz
} {
text : 修改
iconCls : iconedit
id : btn_mxxg
} {
text : 删除
iconCls : icondelete
id : btn_mxsc
}]
}

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

实现过程如下

复制代码 代码如下:

ExtgetCmp("grid_jglb")getStore()on(loadsetTdCls);//设置表格加载数据完毕后更改表格TD样式为垂直居中
function setTdCls(){
var gridJglb=documentgetElementById("grid_jglb");
var tables = gridJglbgetElementsByTagName("table");//找到每个表格
for(var k = ; k < tableslength; k++){
var tableV=tables[k];
if(tableVclassName=="xgridrowtable"){
var trs=tables[k]getElementsByTagName("tr");//找到每个tr
for(var i = ;i < trslength;i++){
var tds=trs[i]getElementsByTagName("td");//找到每个TD
for(var j = ;j<tdslength;j++){
tds[j]stylecssText="width:px;textalign:center;lineheight:px;verticalalign:center;";
}
}
};
}
}