extjs中grid中行内文本或图片居中显示

时间:2022-08-04 18:48:20

我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下:

html代码:

 <div id="weatherP_grid-body" class="x-panel-body x-grid-body x-panel-body-default-framed x-panel-body-default-framed x-layout-fit" style="border-top-width: 1px; border-bottom-width: 1px; width: 1356px; height: 464px; left: 0px; top: 99px;">
<div id="gridview-1017" class="x-grid-view x-fit-item x-grid-view-default x-unselectable" style="overflow: auto; -moz-user-select: none; margin: 0px; width: 1354px; height: 462px;" tabindex="-1">
<table class="x-grid-table x-grid-table-resizer" cellspacing="0" cellpadding="0" border="0" style="width:1344px;">
<tbody>
<tr class="x-grid-header-row">
<th class="x-grid-col-resizer-gridcolumn-1042" style="width: 24px; height: 0px;"></th>
<th class="x-grid-col-resizer-rownumberer-1009" style="width: 35px; height: 0px;"></th>
<th class="x-grid-col-resizer-gridcolumn-1011" style="width: 0px; height: 0px;"></th>
<th class="x-grid-col-resizer-gridcolumn-1012" style="width: 100px; height: 0px;"></th>
<th class="x-grid-col-resizer-gridcolumn-1013" style="width: 100px; height: 0px;"></th>
<th class="x-grid-col-resizer-gridcolumn-1015" style="width: 450px; height: 0px;"></th>
<th class="x-grid-col-resizer-xiansId" style="width: 100px; height: 0px;"></th>
<th class="x-grid-col-resizer-gridcolumn-1016" style="width: 535px; height: 0px;"></th>
</tr>
<tr class="x-grid-row">
<td class=" x-grid-cell x-grid-cell-gridcolumn-1042 x-grid-cell-special x-grid-cell-row-checker x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<div class="x-grid-row-checker"> </div>
</div>
</td>
<td class=" x-grid-cell x-grid-cell-rownumberer-1009 x-grid-cell-special ">
<div class="x-grid-cell-inner " style="vartical-align: middle; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; ">1</div>
</td>
<td class=" x-grid-cell x-grid-cell-gridcolumn-1011 ">
<div class="x-grid-cell-inner " style="vartical-align: middle; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; ">3754</div>
</td>
<td class=" x-grid-cell x-grid-cell-gridcolumn-1012 ">
<div class="x-grid-cell-inner " style="vartical-align: middle; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; ">白天</div>
</td>
<td class=" x-grid-cell x-grid-cell-gridcolumn-1013 ">
<div class="x-grid-cell-inner " style="vartical-align: middle; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; ">晴</div>
</td>
<td class=" x-grid-cell x-grid-cell-gridcolumn-1015 ">
<div class="x-grid-cell-inner " style="vartical-align: middle; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; ">../images/sky/白天/暴雪.png</div>
</td>
<td class=" x-grid-cell x-grid-cell-xiansId ">
<div class="x-grid-cell-inner " style="display: table-cell; vertical-align: middle; height: 40px; width: 100px; text-align: center; *display: block; ">
<img alt="白天-晴" src="../images/sky/白天/暴雪.png">
</div>
</td>
<td class=" x-grid-cell x-grid-cell-gridcolumn-1016 x-grid-cell-last">
<div class="x-grid-cell-inner " style="vartical-align: middle; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; "> </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

ext代码:

 1 //当表格加载时改变表格内行的样式,是行内容居中显示,图片
weatherP_grid.getStore().on('load', function(){//设置表格加载数据完毕后,更改表格TD样式为垂直居中
var weatherP_grid = document.getElementById("weatherP_grid");
var tables = weatherP_grid.getElementsByTagName("table");//找到每个表格
for(var k = 0; k < tables.length; k++){
var tableV = tables[k];
if(tableV.className == "x-grid-table x-grid-table-resizer"){
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++){
var divs = tds[j].getElementsByTagName("div");//找到td下面的div标签
for(var m = 0; m < divs.length; m++){
var imgs = divs[m].getElementsByTagName("img");
if(imgs.length != 0){
//这里一定要设置高度,宽度,宽度要和指定的列的宽度相同
divs[m].attributes[0].nodeValue = "display: table-cell; vertical-align: middle; height: 40px; width: 100px; text-align: center; *display: block; ";
} else {
divs[m].attributes[0].nodeValue = "vartical-align: middle; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; ";
}
}
}
}
}
}
});

代码说明:

weatherP_grid:这个是你ext中设置的grid的ID

tableV.className == "x-grid-table x-grid-table-resizer"):这段代码中涉及到的样式类名是要通过断点调试找到的,因为ext会将grid中解析成heml中的table标签,那这个样式类名就是你那个grid解析成table的样式的类名,我是通过firefox中的firebug找到的

剩下的代码就需要你自己慢慢研究了,花了很长时间搞这个图片居中的问题,大家重视下。

效果图:

extjs中grid中行内文本或图片居中显示