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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
Python操作MongoDB详解及实例
2017/05/18 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
浅述python中深浅拷贝原理
2018/09/18 Python
postman传递当前时间戳实例详解
2019/09/14 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
会计岗位职责范本
2015/04/02 职场文书
赢在执行观后感
2015/06/16 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
学校教师培训工作总结
2015/10/14 职场文书