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

Posted 2021-05-07 阳雪凌空

问题描述：

使用的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，元素移除不了，这个应该跟加载先后的问题有关

 

至此，所有的问题，已经解决！