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

業務場景，須要實現最終效果圖以下：

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的代碼就不貼出來了。接下來看看如何實現垂直居中了。

實現思路：經過獲取DOM節點方式，獲取到表格內全部的TD，設置須要居中的TD的 cssText的值爲：'text-align:center;lineheight:130px;vertical-align:center;'

實現依據：Ext中GridPanel容器最終是生成DIV標籤來渲染的，其中咱們所看到的每一行記錄，好比：「測試項，0，20」這一行數據就是被「包」在一個div內的一個table。只要咱們根據Ext的生成規則找到該table，就能夠操做其td元素了。

如圖：

實現過程以下：

Ext.getCmp("grid_jglb").getStore().on('load',setTdCls);//設置表格加載數據完畢後，更改表格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;";
						}
					}
				};
			}
		}