ExtJS set Gridpanel Table Text Vertical Center sample

This article describes the next ExtJS how to set the Gridpanel table text Vertical Center, the specific implementation code and screenshot as follows, interested friends can refer to ha, I hope to help you

Business scenario, you need to implement the final effect diagram as follows:

The Gridpanel code is configured as follows:

Copy Code code 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: ' Modify ',


iconcls: ' Icon-edit ',


ID: ' BTN_MXXG '


}, '-', {


text: ' Delete ',


iconcls: ' Icon-delete ',


ID: ' BTN_MXSC '


}]


}

The Jsonstore code is not posted. Next look at how to center vertically.
Realization: By obtaining the DOM node mode, get to all the TD in the table, set the Csstext value of TD that needs to be centered: ' Text-align:center;lineheight:130px;vertical-align:center; '
Implementation basis: Ext in the Gridpanel container is ultimately generated div tag to render, where we see every row of records, such as: "Test items, 0,20" This line of data is "package" in a div within a table. As long as we find this table according to the generation rules of EXT, we can operate its TD element.
As shown in figure:

The implementation process is as follows:

Copy Code code as follows:

ext.getcmp ("Grid_jglb"). GetStore (). On (' Load ', settdcls);//Set table after loading data, change the table TD style to center vertically
Function Settdcls ( {
var Gridjglb=document.getelementbyid ("Grid_jglb");
var tables = gridjglb.getelementsbytagname ("table");//find each 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");//Find each TR
for ( var i = 0;i < trs.length;i++) {
var tds=trs[i].getelementsbytagname ("TD");//find each TD
for (var j = 1;j<tds.leng th;j++) {
tds[j].style.csstext= "width:202px;text-align:center;line-height:130px;vertical-align:center;";
}
}
};
}
}