Extjs 如何将Deltax gridpanel滚动到活动编辑器(cellediting)?
我有一个带有cellediting插件的gridpanel,有很多网格标题Extjs 如何将Deltax gridpanel滚动到活动编辑器(cellediting)?,extjs,extjs4,Extjs,Extjs4,我有一个带有cellediting插件的gridpanel,有很多网格标题 (至少使网格显示为水平滚动条).. 这是 我的网格中有一个错误,请尝试编辑其中一个错误,然后按tab键导航到header15。。 网格没有滚动到我正在编辑的位置,… 是虫子吗??a已经在他们的网站上找过了,但是运气不好 那么,如何修复它呢?? 如何使我的网格滚动到活动编辑器 从文档中,有一个方法scrollByDeltaX, 但是如何从活动编辑器中了解增量???简而言之,:) (太自由了,想要你的赏金,请奖励我!) 有趣
(至少使网格显示为水平滚动条)..
这是 我的网格中有一个错误,请尝试编辑其中一个错误,然后按tab键导航到header15。。 网格没有滚动到我正在编辑的位置,…
是虫子吗??a已经在他们的网站上找过了,但是运气不好 那么,如何修复它呢??
如何使我的网格滚动到活动编辑器 从文档中,有一个方法
scrollByDeltaX
,但是如何从活动编辑器中了解增量???简而言之,:) (太自由了,想要你的赏金,请奖励我!) 有趣的是,我的答案在4.0.7上运行得很好,但在4.0.2a上却不起作用!毫无线索,我检查了
4.0.2a
的源代码,并震惊地看到:
在src/panel/Table.js中(4.0.2a)
注意到什么了吗?签出函数scrollByDeltaX
!它的编码错误(在4.0.7中修复)!!!这显然不会有任何视觉反馈。它要求垂直滚动条进行deltaX滚动。怎么可能呢
无论如何,如果您不想升级到4.0.7,解决这个问题相当容易。Afaik 4.0.7继承了4.0.6中的大量bug,这让我的项目陷入了一个可怕的屏蔽问题
下面是我的工作答案,我希望你会感激。基本上,我已经修改了onEditorTab
方法并创建了一个事件钩子,这样您的grid
就可以钩住它,并在触发选项卡时执行scrollByDeltaX
我不太确定如何进行最左/最右滚动,因此出于懒惰,在我的代码中使用了一个有趣的无限
下面是一个示例:(记住也要尝试SHIFT+TAB)
/**
*自定义行选择模型,该模型将
*当出现制表符时触发“editortab”事件
*/
Ext.define('NS.RowModel'{
扩展:“Ext.selection.RowModel”,
//如果为False,则在创建选项卡时换行到下一行
//排到最后
错误:,
initComponent:function(){
/**
*@event editortab
*当编辑器处于选项卡状态时激发
*@param{RowModel}RowModel此RowModel
*@param{Editor}编辑
*@param{string}dir选项卡的方向(左或右)
*@param{Event}e事件对象
*/
本.附录('editortab');
这是callParent();
},
//记住哪一个是最后一个上下文
lastEditorContext:null,
onEditorTab:功能(edt,e){
//此代码的一部分来自中的原始onEditorTab
//src/selection/RowModel.js第416行
var me=这个,
view=me.views[0],
record=edt.getActiveRecord(),
header=edt.getActiveColumn(),
位置=视图.getPosition(记录,标题),
方向=e.移动键“左”:“右”,
newPosition=view.walkCells(位置、方向、e、this.preventWrap);
//我们存储最后一个上下文,因此我们知道
//上下文是否已更改
me.lastEditorContext=edt.context;
//如果有新位置,请编辑;否则,请完成编辑。
if(新职位){
edt.起始ITBYPOSITION(新职位);
}否则{
edt.completeEdit();
}
//如果环境没有改变,我们就试着走路
//转到下一个编辑框,直到找到新的编辑框(上下文已更改)
while(me.lastEditorContext==edt.context&&newPosition){
newPosition=view.walkCells(newPosition,direction,e,this.preventWrap);
if(新职位){
edt.起始ITBYPOSITION(新职位);
}
}
//触发事件
this.firevent('editortab',this,edt,direction,e);
}
});
/**
*自定义编辑器网格以支持制表符
*/
Ext.define('NS.EditorGrid'{
扩展:“Ext.grid.Panel”,
initComponent:function(){
var me=这个;
Ext.applyIf(我{
插件:[Ext.create('Ext.grid.plugin.CellEditing'{
单击编辑:1
})],
selModel:Ext.create('NS.RowModel'{
听众:{
编辑选项卡:{
fn:me.onEditorTab,
范围:我
}
}
})
});
me.callParent();
},
onEditorTab:函数(sel、edt、dir、e){
var lastRow=sel.lastEditorContext.rowIdx,
newRow=edt.context.rowIdx,
deltaX=0;
//让我们先计算一下税收
//如果行更改,我们将单元格重置为最左侧或最右侧
if(lastRow!=newRow){
deltaX=最后一行<新行?-无限:无限;
}否则{
//否则,请执行以下操作:)
deltaX=edt.context.column.width*(dir=='right'?1:-1);
}
//如果您使用的是4.0.2a,请使用此选项。他们有输入错误
//src/panel/Table.js,第1133行
var horizontalcoller=this.gethorizontalcoller();
if(水平滚动器)水平滚动器.scrollByDeltaX(deltaX);
//但是,如果您运行的是4.0.7,则可以使用以下选项:
//这是scrollByDeltaX(deltaX);
}
});
//-------------------------------------------------
//下面的所有内容都保留了:)
Ext.onReady(函数(){
var storeSr=Ext.create('Ext.data.ArrayStore'{
字段:[“KD\U SR”、“NM\U SR”]
});
//加载数据
var-tmpd=[];
对于(i=1;我感谢你……,确切地说,当我问这个问题时,我没有看到sencha发布了最新版本(4.0.7)……现在,我将尝试迁移。但是,如果有错误,我将再次使用4.0.2a和你的解决方案。再次感谢你。我给你我的赏金谢谢!爱的利兹点:)顺便说一句,4.0.7是错误
/**
* Scrolls the TablePanel by deltaY
* @param {Number} deltaY
*/
scrollByDeltaY: function(deltaY) {
var verticalScroller = this.getVerticalScroller();
if (verticalScroller) {
verticalScroller.scrollByDeltaY(deltaY);
}
},
/**
* Scrolls the TablePanel by deltaX
* @param {Number} deltaY
*/
scrollByDeltaX: function(deltaX) {
var horizontalScroller = this.getVerticalScroller();
if (horizontalScroller) {
horizontalScroller.scrollByDeltaX(deltaX);
}
},
/**
* Customized Row Selection Model which will
* fires "editortab" event when an tabbing occurs
*/
Ext.define('NS.RowModel', {
extend: 'Ext.selection.RowModel',
//False to wrap to next row when you tab
//to the end of a row
preventWrap: false,
initComponent: function() {
/**
* @event editortab
* Fires when editor is tabbed
* @param {RowModel} rowModel this rowmodel
* @param {Editor} edt The editor
* @param {string} dir The direction of the tab (left or right)
* @param {Event} e The event object
*/
this.addEvents('editortab');
this.callParent();
},
//memorizing which is the last context
lastEditorContext: null,
onEditorTab: function(edt, e) {
//Part of this code is from the original onEditorTab in
//src/selection/RowModel.js line 416
var me = this,
view = me.views[0],
record = edt.getActiveRecord(),
header = edt.getActiveColumn(),
position = view.getPosition(record, header),
direction = e.shiftKey ? 'left' : 'right',
newPosition = view.walkCells(position, direction, e, this.preventWrap);
//we store the last context, so we know whether the
//context has changed or not
me.lastEditorContext = edt.context;
//if there is new position, edit; else, complete the edit.
if (newPosition) {
edt.startEditByPosition(newPosition);
}else{
edt.completeEdit();
}
//If context doesn't change, we try to walk
//to the next one until we find a new edit box (context changed)
while (me.lastEditorContext === edt.context && newPosition) {
newPosition = view.walkCells(newPosition, direction, e, this.preventWrap);
if (newPosition) {
edt.startEditByPosition(newPosition);
}
}
//Fires the event
this.fireEvent('editortab', this, edt, direction, e);
}
});
/**
* Customized Editor Grid to support tabbing
*/
Ext.define('NS.EditorGrid', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
selModel: Ext.create('NS.RowModel', {
listeners: {
editortab: {
fn: me.onEditorTab,
scope: me
}
}
})
});
me.callParent();
},
onEditorTab: function(sel, edt, dir, e) {
var lastRow = sel.lastEditorContext.rowIdx,
newRow = edt.context.rowIdx,
deltaX = 0;
//Let's calculate deltaX first
//if row changed, we reset the cells to the left most or right most
if (lastRow != newRow) {
deltaX = lastRow < newRow ? -Infinity : Infinity;
}else{
//else, do deltax :)
deltaX = edt.context.column.width * (dir == 'right' ? 1 : -1);
}
//If you are using 4.0.2a, use this. They have typo in
//src/panel/Table.js, line 1133
var horizontalScroller = this.getHorizontalScroller();
if (horizontalScroller) horizontalScroller.scrollByDeltaX(deltaX);
//But if you are running 4.0.7, this is fine. Use this:
//this.scrollByDeltaX(deltaX);
}
});
//-------------------------------------------------
//Everything below remains :)
Ext.onReady(function() {
var storeSr=Ext.create('Ext.data.ArrayStore', {
fields: ["KD_SR","NM_SR"]
});
//load data
var tmpd=[];
for (i=1;i<=15;i++){
tmpd.push([i,"nm "+i]);
}
storeSr.loadData(tmpd);
//create column
col=[]
col.push({header: "Kode", dataIndex: 'KD_SR'});
for (j=1;j<=15;j++){
col.push({
header: "Header"+j,
width:100,
dataIndex: 'NM_SR',
editor:{xtype:"textfield"}
});
}
var gridSr = Ext.create('NS.EditorGrid', {
height: 200,
width: 500,
store: storeSr,
columns: col
});
//create window
var winEditSR=Ext.create("Ext.Window",{
title:"Sub Rayon",
autoWidth : true,
autoHeight : true,
autoShow:true,
border : false,
modal : true,
items : [gridSr]
});
});