Extjs 如何将Deltax gridpanel滚动到活动编辑器（cellediting）？

我有一个带有cellediting插件的gridpanel，有很多网格标题
（至少使网格显示为水平滚动条）..
这是

我的网格中有一个错误，请尝试编辑其中一个错误，然后按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]
    }); 
});