脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ExtJs 设置GridPanel表格文本垂直居中，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

业务场景，需要实现最终效果图如下：
GridPanel代码如下配置：

[javascript]  { 
    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 
            }), 
    columns : [{ 
                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 : '新增', 
                iconCls : 'icon-add', 
                id : 'BTn_mxxz' 
            }, '-', { 
                text : '修改', 
                iconCls : 'icon-edit', 
                id : 'btn_mxxg' 
            }, '-', { 
                text : '删除', 
                iconCls : 'icon-delete', 
                id : 'btn_mxsc' 
            }] 
} 

{
 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
   }),
 columns : [{
    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 : '新增',
    iconCls : 'icon-add',
    id : 'btn_mxxz'
   }, '-', {
    text : '修改',
    iconCls : 'icon-edit',
    id : 'btn_mxxg'
   }, '-', {
    text : '删除',
    iconCls : 'icon-delete',
    id : 'btn_mxsc'
   }]
}
JsonStore的代码就不贴出来了。接下来看看如何实现垂直居中了。

实现思路：通过获取DOM节点方式，获取到表格内所有的TD，设置需要居中的TD的 cssText的值为：'text-align:center;lineheight:130px;vertical-align:center;'

实现依据：Ext中GridPanel容器最终是生成DIV标签来渲染的，其中我们所看到的每一行记录，比如：“测试项，0，20”这一行数据就是被“包”在一个p内的一个table。只要我们根据Ext的生成规则找到该table，就可以操作其td元素了。

如图：

实现过程如下：[javascript]  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;j<tds.length;j++){    
                            tds[j].style.cssText="width:202px;text-align:center;line-height:130px;vertical-align:center;"; 
                        } 
                    } 
                }; 
            } 
        } 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-ExtJs 设置GridPanel表格文本垂直居中全部内容，希望文章能够帮你解决javascript代码实例教程-ExtJs 设置GridPanel表格文本垂直居中所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。