extjs2.2使用多表头插件两层表头对不齐错位的问题

最新推荐文章于 2019-01-29 14:25:00 发布
最新推荐文章于 2019-01-29 14:25:00 发布
阅读量1k 收藏
点赞数 1
分类专栏： 项目问题记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruoyeknight/article/details/53925439
版权

使用插件ColumnGroupHeader.js(extjs3.1版本内可以找到)后出现两层表头错位的问题。

【问题解决】

column中包含隐藏列，在设置第一层表头的时候少设置了一层，没算上这个隐藏列，因此多加一列，问题解决。

隐藏列的宽度为0px，看不到这列也得为这列设置第一层表头！


Knimet
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
10-17
主要介绍了ExtJs使用自定义插件动态保存表头配置(隐藏或显示) ,需要的朋友可以参考下
extjs3多表头
02-27
extjs3多表头;表头合并;绝对可以用
解决extjs 3 chrome上grid 合并表头 cm错位
loushi135的专栏
05-03 526
问题： extjs 合并表头 ，列有错位情况  解决方法： //解决extjs 谷歌浏览器grid 里面cm错位 Ext.grid.ColumnModel.override({ getTotalWidth: function(includeHidden) { var off = 0; // if(!Ext.isDefined(Ext.isChrome19)){ /...
解决ExtJS的gridpanel在谷歌浏览器中，表头总宽度与每行的总宽度不一致的bug
雪落夜的专栏
03-02 1537
//修复办法，谷歌浏览器中,table的单元格实际宽度=指定宽度+padding，所以只要重写gridview里的一个方法，如下： Ext.override(Ext.grid.GridView,{ getColumnStyle : function(colIndex, isHeader) { var colModel = this.cm,
Ext gridpanel 在chrome错位
zdzyh1989的专栏
12-12 514
当ExtJS3.4.0版本（其之前的版本应该也存在此问题）的Grid组件中同时存在水平和垂直滚动条时，在Chrome浏览器下（基于webkit渲染引擎下的浏览，safari也存在，本人未测）垂直滚动条会导致内容列错位。这是一个浏览器兼容性的ExtJS原生BUG（EXTJSIII-47），在ExtJS3.4.2版本中解决了。具体效果如下图：通过上图，可以明显的看到Grid组件的内容列发生“错位”的...
EXT复合表头谷歌浏览器Chrome错位解决办法
现在渣不代表我永远渣= =
12-12 1095
转载自：http://www.oschina.net/code/snippet_201314_15163Ext.override(Ext.grid.GridView,{ getColumnStyle : function(colIndex, isHeader) { var colModel = this.cm, colConfig = colModel.config, styl
解决 Ext.form.DateField 在 chrome 等浏览器下显示异常
cdmamata的专栏
03-18 3528
extjs 自带的时间控件在chrome下显示异常，控件长度拉满整个屏幕，只需加上如下代码即可。 /********** 解决日历控件显示异常 **********/ Ext.override(Ext.menu.DateMenu, { render : function() { Ext.menu.DateMenu.superclass.render.call(this); i
解决extjs 3 bug chrome上grid cm错位的问题
Draco
04-18 4088
1、解决extjs 3 chrome上grid  cm错位的问题，这个是Extjs 的一个bug 问题如图片下 2.解决方法官方的 http://www.sencha.com/forum/archive/index.php/t-198124.html?s=782e3297b3794980e855431bf90e6172 Ext.grid.ColumnModel.override
ExtJS一个表格错位的bug处理
walle的博客
12-14 1509
   有个布局，是左边一个treepanel，右边一个grid， 结果是左边的treepanel没有滚动条，因为左边的树列表内容很多，显示不完，应该出现垂直滚动条的， 右边的表格也错位了，标题和下面的行没对齐： 代码是这样的：  布局： Ext.apply(me, { items: [{ region: "center", layout: "border", split: ...
extjs 3 在chrome浏览器grid不对齐Bug处理
weixin_33976072的博客
01-29 524
为什么80%的码农都做不了架构师？>>> ...
Extjs4.0可编辑表格拖拽列头后列不能对齐问题
Alicedetears的专栏
09-08 2055
Ext.grid.RowEditor.prototype.errorsText='错误', Ext.grid.RowEditor.prototype.dirtyText='你必须提交或取消更改',  Ext.grid.RowEditor.prototype.saveBtnText = "保存";Ext.grid.RowEditor.prototype.cancelBtnText = '取消';
extjs grid 多表头插件
09-17
extjs grid 多表头 插件 extjs grid 多表头 插件
extjs 2.2中文API帮助文档CHM格式的下载
09-10
extjs 2.2中文API帮助文档CHM格式的下载， 最全最新的API文档下载。 extjs 2.2中文API帮助文档CHM格式的下载， 最全最新的API文档下载。
ExtJS 2.2 开源网络硬盘系统-dogdisk.zip
最新发布
07-28
ExtJS 2.2 开源网络硬盘系统_dogdisk.zip
ajax post请求发送json数据报错unexpected token in json at position的问题解决
热门推荐
Knimet的博客
10-17 1万+
项目问题，post请求发送json数据到nodejs服务器报错unexpected token in json at position的问题解决
【Hibernate】query查询不报错卡住不动不往下执行的解决办法
Knimet的博客
02-25 5078
【项目问题记录】 一.数据库 表：goods 字段：id | name | price 二.项目代码 2.1 实体类： @Entity @Table(name="goods") public class Goods { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Integer id;
原生js实现图片在固定窗口内放缩、拖拽
Knimet的博客
09-22 2977
原生js实现的图片在固定大小窗口内放缩、拖拽
ftl页面打开后直接显示代码不显示空间的问题
Knimet的博客
12-18 1504
【问题描述】在未配置越权的状态下，打开ftl页面，浏览器显示body内的代码 【举例】 test.ftl 启动服务器后，浏览器上打开test.ftl页面，直接显示代码 【问题解决】 在后台写了初始化页面的方法，打开ftl页面的时候链接到后台的初始化方法再打开页面。 【解决办法的简单例子】 在struts架构下，后台方法为 public Str
extjs4 多层表头
05-27
在 ExtJS4 中，可以使用 Ext.grid.header.Container 和 Ext.grid.column.Column 类来实现多层表头。具体步骤如下： 1. 创建一个 Ext.grid.Panel 实例，并定义表格列的配置项。 2. 使用 Ext.grid.header.Container 类创建表头容器，设置容器的布局和样式。 3. 使用 Ext.grid.column.Column 类创建表头列，设置列的文字、宽度、数据域等属性。 4. 将表头列添加到表头容器中，并设置表头列的嵌套关系，即将子表头列添加到父表头列的子项中。 5. 将表头容器设置为表格的顶部工具栏，通过表格的 reconfigure 方法重新加载数据。 示例代码如下： ``` var grid = Ext.create('Ext.grid.Panel', { columns: [ { text: 'Group 1', columns: [ { text: 'Name', dataIndex: 'name', width: 100 }, { text: 'Age', dataIndex: 'age', width: 50 } ] }, { text: 'Group 2', columns: [ { text: 'City', dataIndex: 'city', width: 100 }, { text: 'Country', dataIndex: 'country', width: 100 } ] } ], store: store, tbar: { xtype: 'headercontainer', items: [ { xtype: 'gridcolumn', text: 'Group 1', columns: [ { text: 'Name', dataIndex: 'name', width: 100 }, { text: 'Age', dataIndex: 'age', width: 50 } ] }, { xtype: 'gridcolumn', text: 'Group 2', columns: [ { text: 'City', dataIndex: 'city', width: 100 }, { text: 'Country', dataIndex: 'country', width: 100 } ] } ] }, height: 200, width: 400, renderTo: Ext.getBody() }); ``` 其中，store 是数据源，可以使用 Ext.data.Store 类创建。在这个示例中，表头容器使用了 Ext.grid.header.Container 类，并且设置了 xtype 为 'headercontainer'，表头列使用了 Ext.grid.column.Column 类，并且设置了 xtype 为 'gridcolumn'。表头列的嵌套关系通过 columns 属性实现。最后，表头容器作为表格的顶部工具栏，通过 tbar 属性设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值