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元素了。
如图:
 
实现过程如下:


代码如下:

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;";
}
}
};
}
}

(0)

相关推荐

  • ExtJs GridPanel简单的增删改实现代码

    1.首先看下效果图: 2.ext代码 复制代码 代码如下: /// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" /> Ext.namespace('XQH.ExtJs.Frame'); XQH.ExtJs.Frame.RoleManage = function() { this.init(); }; Ext.extend(XQH.ExtJs.Frame.RoleMana

  • Extjs EditorGridPanel中ComboBox列的显示问题

    为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 复制代码 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: "GetDepartmentJson.aspx", method: 'GET' }), reader: new Ext.data.

  • ExtJS GridPanel 根据条件改变字体颜色

    1.在GridPanel中加入GridView 复制代码 代码如下: <View> <ext:GridView ID="GridView1" runat="server"> <GetRowClass Fn="setRowBg" /> </ext:GridView> </View> 2.加入js脚本 复制代码 代码如下: <script language="javascri

  • Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    1.之前在winForm上有看过在选择数据时会将一些数据放在待选框中,而用户可以将想要选择的数据放到备选框中,那么如何用Extjs实现类似功能,我们选择用两个gridPanel来模拟其中的备选框和待选框.如下图所示: 定义代码如下: 复制代码 代码如下: {               xtype:'gridpanel',               multiSelect: true,                id:'staff',                 x: 5,      

  • ExtJS 2.0 GridPanel基本表格简明教程

    ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.ColumnModel定义.而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore.SimpleStroe.GroupingSto

  • Extjs4 GridPanel 的几种样式使用介绍

    简单表格 排序,显示某列,读取本地数据 复制代码 代码如下: //本地数据 var datas = [ ['1', 'gao', 'man'], ['2', 'gao', 'man'], ['3', 'gao', 'man'] ]; //创建面板 Ext.create('Ext.grid.Panel', { title: 'easy grid', width: 400, height: 300, renderTo: Ext.getBody(), frame: true, viewConfig:

  • Extjs4 GridPanel的主要配置参数详细介绍

    1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMenu:

  • Extjs gridpanel 出现横向滚动条问题的解决方法

    复制代码 代码如下: viewConfig : { layout : function() { if (!this.mainBody) { return; // not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)

  • ExtJs中gridpanel分组后组名排序实例代码

    复制代码 代码如下: /**   * 定义降序的groupingStore   */var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : 'ASC', groupBy : function(field, forceRegroup, direction) {     direction = direction ? (String(direction)               .toUpperCase()

  • Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

    在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中 如下图: 但是这个一般没有什么用处,只是用于后台取值的作用. so 加一个属性:hideable:false就可以搞定了 复制代码 代码如下: { header: "attendanceId", dataIndex: "attendanceId", hideable: false, hidden: true },

  • JavaScript的Ext JS框架中的GridPanel组件使用指南

    1 最简单的Grid Panel Grid Panel是ExtJS的核心部分之一,通过Grid Panel可以对数据显示.排序.分组和编辑.Model和Store是Grid Panel处理数据的核心,每个Grid Panel都必须设置Model和Store.要创建Grid Panel,首先要定义Model,Model包括了Grid Panel所有需要显示的字段,相当于数据库中表字段的集合.Store可以看作是一行数据的集合或者是Model的实例集合,每个Store都包含一个或多个Model实例,

随机推荐