码迷,mamicode.com
首页 > Web开发 > 详细

extjs3.1 解决列锁定,合计行不能滑动的问题

时间:2019-10-10 11:19:08      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:fun   需要   cell   scroll   实例   panel   listen   set   部分   

问题描述:

使用的extjs版本是3.1,需求是锁定前2列,最下面有一行是合计行,遇到的问题是,锁定前2列之后,最下面的合计行不会随着滚动条滑动而滑动了

问题解决:

1.解决列固定的问题:

第一步,在需要固定的列里面加上属性:locked:true

第二步,实例化列模型,使用,new Ext.ux.grid.LockingColumnModel

第三步,在new Ext.grid.GridPanel里面加上, view: new Ext.ux.grid.LockingGridView(),

至此,列固定这个功能已经实现了

2.解决合计这行滑动的问题

主要思路:这个需要使用前端的知识,审查元素,看看具体是什么原因,让合计行固定了,在GridPanel面板加载成功之后,执行js代码

var grid = new Ext.grid.GridPanel({

view: new Ext.ux.grid.LockingGridView(),
loadMask : { msg : ‘正在加载表格数据,请稍等...‘ },
listeners : {    
‘afterrender‘ : function(){
$(".x-grid3-viewport .x-grid3-gridsummary-row-inner").addClass("x-grid3-scroller");
$(".x-grid3-viewport .x-grid3-gridsummary-row-inner").css("width",$(".x-grid3-viewport .x-grid3-scroller").width());
setTimeout(function(){
$(".x-grid3-locked .x-grid3-scroller").css("height",$(".x-grid3-viewport .x-grid3-scroller").height());
var html = ‘<div class="x-grid3-gridsummary-row-inner" id="ext-gen25" style="width: 200px;"><div class="x-grid3-summary-row" id="ext-gen28"><table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="/* width:4700px; */"><tbody><tr><td class="x-grid3-cell" style="width: 100px !important;"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on"> </div></td><td class="x-grid3-col x-grid3-cell x-grid3-td-48 x-grid3-cell-last " style="width:100px;"><div class="x-grid3-cell-inner x-grid3-col-48" selectable="on">合计:</div></td></tr></tbody></table></div></div>‘;
$(‘.x-grid3-locked‘).append(html);

$($(".x-grid3-viewport .x-grid3-summary-table .x-grid3-col")[0]).remove();
$($(".x-grid3-viewport .x-grid3-summary-table .x-grid3-col")[0]).remove();
},500);
}
}

)}

红线部分,是新增的部分,为了解决合计行滑动的问题

setTimeout是问了实现,页面加载成功之后,移除一些元素的问题,这个根据具体情况使用了,如果不用timeout,元素移除不了,这个应该跟加载先后的问题有关

 

至此,所有的问题,已经解决!

 

extjs3.1 解决列锁定,合计行不能滑动的问题

标签:fun   需要   cell   scroll   实例   panel   listen   set   部分   

原文地址:https://www.cnblogs.com/hupengyin/p/11646184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!