ExtJs_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
}),
列: [{
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 : 'Add',
iconCls : 'icon-add' ,
id : 'btn_mxxz'
}, '-', {
text : '編集',
iconCls : 'icon-edit',
id : ' btn_mxxg'
}, '-', {
text : 'delete',
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 に「ラップ」されます。 。 Extの生成ルールに従ってテーブルを見つければ、その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 var tds を検索します=trs[i].getElementsByTagName("td ");//各 TD を検索します。
for(var j = 1;jtds[j].style.cssText=" width:202px;text-align:center ;line-height:130px;vertical-align:center;";
}
}
};
}
}