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

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
}),
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”这一行数据就是被“包”在一个div内的一个table。只要我们根据Ext的生成规则找到该table,就可以操作其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;j<tds.length;j++){
tds[j].style.cssText="width:202px;text-align:center;line-height:130px;vertical-align:center;";
}
}
};
}
}

ExtJs 设置GridPanel表格文本垂直居中的更多相关文章

  1. 【编程技巧】ExtJs 设置GridPanel表格文本垂直居中

    详细讲解见 http://blog.csdn.net/li396864285/article/details/9310983 以下是我改修的代码: {         width:90,        ...

  2. css样式设置高度不定文本垂直居中

    使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可.但对于 ...

  3. Extjs 设置GridPanel单元格可选择高兼容写法

    网上大部分都是这种 <style type= "text/css" > .x-selectable, .x-selectable * { -moz-user-selec ...

  4. CSS元素和文本垂直居中

    div居中 1.使用绝对定位和负外边距让块级元素垂直居中 要点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. <div id="box"> <di ...

  5. html文本垂直居中对齐

    html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...

  6. [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...

  7. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

  8. Android 浏览器文本垂直居中问题

    问题描述 在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候 ...

  9. EXTJS 4 树形表格组件使用演示样例

    EXTJS 4 树形表格组件使用演示样例 一.总体效果图 version=1&modificationDate=1412058826000&api=v2" alt=" ...

随机推荐

  1. JAVA学习笔记 -- 数据结构

    一.数据结构的接口 在Java中全部类的鼻祖是Object类,可是全部有关数据结构处理的鼻祖就是Collection和Iterator接口,也就是集合与遍历. 1.Collection接口 Colle ...

  2. Swift - 判端网络连接状态,连接类型(3G还是Wifi)

    IJReachability是一个使用Swift写的第三方网络检测类.可以测试网络是否连接,并支持3G和Wifi的检测. 使用样例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  3. poj3356 AGTC

    Description Let x and y be two strings over some finite alphabet A. We would like to transform x int ...

  4. 认识axure部件库中各个部件的属性

    在axure中每一个部件都有自己的属性,下面这个表格,我们就首先来了解认识一下!以下内容来自网站蓝图,版权归原作者所有! 属性名称 属性说明 属性举例 标签 用来标示部件的名称,在axure中,部件名 ...

  5. httpClient中的三种超时设置小结

    httpClient中的三种超时设置小结   本文章给大家介绍一下关于Java中httpClient中的三种超时设置小结,希望此教程能给各位朋友带来帮助. ConnectTimeoutExceptio ...

  6. uva 10692 - Huge Mods(数论)

    题目链接:uva 10692 - Huge Mods 题目大意:给出一个数的次方形式,就它模掉M的值. 解题思路:依据剩余系的性质,最后一定是行成周期的,所以就有ab=abmod(phi[M])+ph ...

  7. JSP自定义标签——简单标签(2)

    在前一篇博客中,我们已经学习了自定义的简单标签的基本使用方法,这一篇我们来学习如何在简单标签中添加标签属性.对自定义标签添加一些属性,可以使我们的标签功能更加灵活和复用.例如前一篇博客使用简单标签来对 ...

  8. 【Demo 0001】Android 程序结构

    Android 学习步骤及内容:     1.  Android 程序结构(开发环境搭建,Android第一程序,程序启动过程以及工程介绍):     2.  Android 事件(通用使用规则,通用 ...

  9. 微凉大大,教你一步一步在linux中正确的安装Xcache加速php。

    首先,强烈吐槽,百度上的教程,都左复制右复制的,乱七八糟,缺东缺西的.借此微凉大大我提供我苦心整理好的教程.以便各位小菜能顺利的使用Xcache加速php,假设看完了,也操作了,还是失败了的话,请联系 ...

  10. Linux下限制Shell:Rssh和Scponly

    限制Shell,正如Rsh和Scponly让系统管理员限制Linux用户可以做哪些操作,你可以创建用户,将被允许通过Scp复制文件,但不会被允许登录到系统的命令行.这是非常重要的安全功能,应考虑每个系 ...