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',
편집 가능 : false,
헤더 : '열 이름 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 : 'Edit',
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 < trs.length;i ){
var tds =trs[i].getElementsByTagName("td ​​");//각 TD 찾기
for(var j = 1;jtds[j].style.cssText=" 너비:202px;텍스트 정렬:중심 ;라인 높이:130px;세로 정렬:중심;";
}
}
};
}
}