ExtJS4 grid合并单元格

迈不过友情╰ 2022-07-19 11:49 263阅读 0赞

效果图：

![Center][]

Ext.define('V5.cxb.controller.Cxb', \{

extend : 'Ext.app.Controller',  
models : \['V5.cxb.model.Cxb'\],  
stores : \[\],  
views : \['V5.cxb.view.Grid'\],  
refs : \[\{  
ref:'Grid',  
selector:'cxbGrid'  
\}\],  
  
  
init : function() \{  
var me = this;  
  
this.control(\{  
'button' : \{  
click : me.doAction  
\}  
\});  
\},  
doAction : function(btn) \{  
var me = this;  
var grid = Ext.ComponentQuery.query('\#cxb');  
var store = grid\[0\].getStore();  
store.on('load',function()\{  
console.log(grid\[0\].getView());  
//合并时从右往左（行），从下往上合并（列）  
span(grid,0,1,'row',3);  
span(grid,3,1,'row',2);  
span(grid,0,0,'row',5);  
  
  
\});  
var span = function(grid,row,col,type,num)\{  
switch(type)\{  
case'row':     //合并行  
tds = Ext.get(grid\[0\].view.getNode(row)).query('td');  
Ext.get(tds\[col\]).set(\{rowspan:num\});  
Ext.get(tds\[col\]).setStyle(\{'vertical-align':'middle'\});  
for(var i = row + 1; i < row + num; i ++)\{  
Ext.get(Ext.get(grid\[0\].view.getNode(i)).query('td')\[col\]).destroy();  
\}break;  
case 'col':   //合并列  
tds = Ext.get(grid\[0\].view.getNode(row)).query('td');  
Ext.get(tds\[col\]).set(\{colspan:num\});  
break;  
\}

\}

//重新加载时触发

store.reload(1);  
\}  
\});

[Center]: /images/20220718/9f00ed48c5c64b4fa2a78003e0f367e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关合并单元格

cellRange = new CellRangeAddress(0, 0, 4, 5); //开始行结束行开始列结束列 // 合并单元格 she

ゞ浴缸里的玫瑰/ 2023年10月15日 13:06/ 0 赞/ 21 阅读

相关 Aspose.Cells 使用Merge()合并单元格（合并单行单元格，合并单列单元格，合并多行多列单元格）

1 使用详解 Merge() 说明：合并单元格，可选择合并多行多列单元格。语法： public void Merge(int firstRow, int firs

矫情吗；*/ 2023年10月05日 06:53/ 0 赞/ 15 阅读

相关 Extjs grid 单元格溢出用……代替

Extjs 单元格中如果字符长度大于单元格宽度时，特别有换行符时就会将单元格高度拉伸，如果一个grid 界面上每行记录的高度不一致就会大大影响界面的美观性。所以，就想到了让每个

待我称王封你为后i/ 2022年07月28日 00:10/ 0 赞/ 130 阅读

相关 ExtJs合并单元格

前端框架ExtJS4.0 下图为合并后效果：先 ![Image 1][] 最近项目中做Grid显示时，需要将单元格分类然后按一定要求给合并，如果单单是合并表头，

╰半橙微兮°/ 2022年07月21日 12:19/ 0 赞/ 411 阅读

相关 ExtJS4 grid单元格添加复选框

效果图： ![Center][] //添加复选框 var deal = function(grid)\{ //获取视图行数 var rows =

灰太狼/ 2022年07月19日 11:53/ 0 赞/ 226 阅读

相关 ExtJS4 grid合并单元格

效果图： ![Center][] Ext.define('V5.cxb.controller.Cxb', \{ extend : 'Ext.app.Co

迈不过友情╰/ 2022年07月19日 11:49/ 0 赞/ 264 阅读

相关 ExtJS4 grid单元格悬浮提示

![Center][] \{ header : "选样方法", dataIndex : 'name3', renderer: function(val

ゝ一纸荒年。/ 2022年07月17日 00:20/ 0 赞/ 159 阅读

相关 PDFPtable合并单元格

> PdfPtable只能合并列，不能合并行 public static void main(String[] args) throws Exception {

痛定思痛。/ 2022年05月12日 05:42/ 0 赞/ 774 阅读

相关 Extjs标悬浮在grid单元格上时，显示单元格中内容的值

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] \{ xtype: 'gridcolumn', te

Myth丶恋晨/ 2022年01月16日 04:59/ 0 赞/ 317 阅读

相关 ExtJS Grid的单元格编辑Enter和TAB键的转换

ExtJS摘编（后续其它） 1. ExtJS的grid的按键，默认是Enter(Shift+Enter)上下移动光标，TAB（Shift+Tab）左右移动光标。

爱被打了一巴掌/ 2021年12月13日 00:15/ 0 赞/ 299 阅读