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


Posted in Javascript onJuly 15, 2013

业务场景,需要实现最终效果图如下:
ExtJs设置GridPanel表格文本垂直居中示例 
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元素了。
如图:
ExtJs设置GridPanel表格文本垂直居中示例 
实现过程如下:
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;"; 
} 
} 
}; 
} 
}
Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
js获取和设置属性的方法
Feb 20 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
javascript 回调函数详解
Nov 11 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
es6数值的扩展方法
Mar 11 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 #Javascript
JS中获取数据库中的值的方法
Jul 14 #Javascript
js 实现日期灵活格式化的小例子
Jul 14 #Javascript
仿谷歌主页js动画效果实现代码
Jul 14 #Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 #Javascript
jquery实现输入框动态增减的实例代码
Jul 14 #Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 #Javascript
You might like
在WIN98下以apache模块方式安装php
2006/10/09 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
社区党总支书记先进事迹材料
2014/01/24 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书