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;";
}
}
};
}
}

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20479.html