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

更新時間：2013年07月15日 16:49:49 作者：

本文為大家詳細介紹下ExtJs如何設置GridPanel表格文本垂直居中，具體實現(xiàn)代碼及截圖如下，感興趣的朋友可以參考下哈，希望對大家有所幫助

業(yè)務場景，需要實現(xiàn)最終效果圖如下：

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 : new Ext.grid.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, 
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, 
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的代碼就不貼出來了。接下來看看如何實現(xiàn)垂直居中了。
實現(xiàn)思路：通過獲取DOM節(jié)點方式，獲取到表格內(nèi)所有的TD，設置需要居中的TD的 cssText的值為：'text-align:center;lineheight:130px;vertical-align:center;'
實現(xiàn)依據(jù)：Ext中GridPanel容器最終是生成DIV標簽來渲染的，其中我們所看到的每一行記錄，比如：“測試項，0，20”這一行數(shù)據(jù)就是被“包”在一個div內(nèi)的一個table。只要我們根據(jù)Ext的生成規(guī)則找到該table，就可以操作其td元素了。
如圖：

實現(xiàn)過程如下：

復制代碼代碼如下:

 
Ext.getCmp("grid_jglb").getStore().on('load',setTdCls);//設置表格加載數(shù)據(jù)完畢后，更改表格TD樣式為垂直居中 
function setTdCls(){ 
var gridJglb=document.getElementById("grid_jglb"); 
var tables = gridJglb.getElementsByTagName("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;"; 
} 
} 
}; 
} 
} 