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 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jquery.post用法示例代码
Jan 03 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
php抽象类用法实例分析
2015/07/07 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
WAF的正确bypass
2017/01/05 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python通过future处理并发问题
2017/10/17 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
人事行政专员岗位职责
2014/07/23 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
课题研究阶段性总结
2015/08/13 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
MySQL时区造成时差问题
2022/04/13 MySQL
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python