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

我是看了网上写的方法调试自己的代码来实现的，实现的方式是当加载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找到的

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

效果图：