Example of setting vertical centering of GridPanel table text in ExtJs_extjs

The business scenario needs to achieve the final rendering as follows:

GridPanel code is configured as follows:

Copy code The code is as follows:

{
xtype : 'grid',
id : 'grid_jglb',
frame : true,
region : 'center',
title : 'List details',
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 : 'Column name 1',
sortable : true,
width : 100
}, {
xtype : 'gridcolumn',
align : 'center',
dataIndex : 'COLUMN2',
editable : false,
header : 'column name 2',
sortable : true,
width : 100
}, {
xtype : 'gridcolumn',
align : 'center',
dataIndex : 'COLUMN3',
editable : false,
header : 'Column name 3',
sortable : true,
width : 100
}, {
xtype : 'gridcolumn',
align : 'center',
dataIndex : 'COLUMN4',
id : 'colidx1',
editable : false,
header : 'column name 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 : 'Add',
iconCls : 'icon-add' ,
id : 'btn_mxxz'
}, '-', {
text : 'Edit',
iconCls : 'icon-edit',
id : 'btn_mxxg'
}, '-', {
text : 'delete',
iconCls : 'icon-delete',
id : 'btn_mxsc'
}]
}

The JsonStore code will not be posted. Next let’s take a look at how to achieve vertical centering.
Implementation idea: Obtain all TDs in the table by obtaining DOM nodes, and set the cssText value of the TD that needs to be centered as: 'text-align:center;lineheight:130px;vertical-align:center;'
Implementation basis: The GridPanel container in Ext is ultimately rendered by generating DIV tags, in which each row of records we see, such as: "Test item, 0, 20", is "wrapped" in a div of a table. As long as we find the table according to the generation rules of Ext, we can operate its td element.
As shown in the picture:

The implementation process is as follows:

Copy the code The code is as follows:

Ext.getCmp("grid_jglb").getStore().on('load',setTdCls);//After setting the table to load data, change the table TD style to vertical center
function setTdCls (){
var gridJglb=document.getElementById("grid_jglb");
var tables = gridJglb.getElementsByTagName("table");//Find each table
for(var k = 0; k var tableV=tables[k];
if(tableV.className=="x-grid3-row-table"){
var trs=tables[k ].getElementsByTagName("tr");//Find each tr
for(var i = 0;i var tds=trs[i].getElementsByTagName("td ");//Find each TD
for(var j = 1;jtds[j].style.cssText="width:202px;text-align:center ;line-height:130px;vertical-align:center;";
}
}
};
}
}