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 相关文章推荐
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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四种基础算法代码实例
2013/10/29 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP之header函数详解
2021/03/02 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
文明宿舍获奖感言
2014/02/07 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2014年维稳工作总结
2014/11/18 职场文书
欠条样本
2015/07/03 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
Python first-order-model实现让照片动起来
2022/06/25 Python