ExtJs设置GridPanel表格文本垂直居中示例

业务场景，需要实现最终效果图如下

GridPanel代码如下配置：复制代码代码如下： { xtype : 'grid '，id : 'grid_jglb '，frame : true，区域： '中心'，标题： '列表详细信息，columnLines : true，loadMask : true，store : 'test_store '，view config : { force fit : true，scrollOffset : 0 0 }，anchor : '100% '，sel model : new ext。网格。checkbox selection model({ moveeditoroneter : false，宽度： 28 })，列3:[{ xtype 333333330列名1 ',可排序：真，宽度： 100 }，{ xtype : 'gridcolumn '，align : 'center '，dataIndex : 'COLUMN2 '，可编辑：假，标头： '列名2 ',可排序：真的，宽度： 100 }，{ xtype : 'gridcolumn '，align : 'center '，dataIndex : 'COLUMN3 '，可编辑：假，标头： '列名3 ',可排序：真的，宽度： 100 }，{ xtype : 'gridcolumn '，align : 'center '，dataIndex : 'COLUMN4 '，id : 'colidx1 '，可编辑：假，标头： '列名4 ',可排序：真的，宽度： 100 }，{ xtype : 'gridcolumn '，align : 'center '， 数据索引： '列5 '，隐藏：真的，可排序： true }]，bbar : { xtype : '分页'，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的代码就不贴出来了。接下来看看如何实现垂直居中了。实现思路：通过获取数字正射影像图节点方式，获取到表格内所有的TD，设置需要居中的推倒（网络用词)的cssText的值为：' text-align :居中； lineheight:130px '垂直对齐：中心；'实现依据：Ext中GridPanel容器最终是生成差异标签来渲染的，其中我们所看到的每一行记录，比如："测试项，0,20"这一行数据就是被"包"在一个差异内的一个桌子。只要我们根据外面的(外部的简写)的生成规则找到该桌子，就可以操作其任务描述元素了。如图

实现过程如下：复制代码代码如下： Ext.getCmp('grid_jglb ').getStore().on('load '，setdcls)；//设置表格加载数据完毕后，更改表格推倒（网络用词)样式为垂直居中函数setdcls(){ var gridJglb=document。getelementbyid(' grid _ jglb ')；var tables=gridjglb。getelementsbytagname(' table ')；//找到每个表格for(var k=0；k表。长度；k){ var TableV=tables[k]；if(TableV。类名=' x-grid 3-row-table '){ var TRS=tables[k].getElementsByTagName(' tr ')；//找到每个tr为(var I=0；I TRS . lentigi){ var TDS=TRS[I].getElementsByTagName(' TD ')；//找到每个推倒（网络用词）为(var j=1；jtds.lengthj){ TDS[j]。风格。CSS文本=' width :202 px文本对齐：居中；线高' :130 px'垂直对齐：中心；} } };} }