如何将scrollToDeltaX的网格面板转换为主动编辑器（cellediting）？ [英] how to scrollToDeltaX gridpanel to the active editor(cellediting)?
问题描述
（至少使网格显示为水平滚动条）...
这里是< a href =http://jsfiddle.net/mohammad_erdin/AzV3c/ =nofollow>演示 ...
有一个bug在我的网格中，尝试编辑一个collumn，然后按Tab键导航到 header15 ..
网格没有滚动到我正在编辑的地方，... < br>
是一个bug？一个在他们的论坛寻找这个，但没有运气..
所以，如何解决它？
如何使我的网格滚动到活动编辑器？
从文档中，有一个方法 scrollByDeltaX ，
但是如何从活动编辑器知道增量？
将其缩短，尝试演示第一个：）
（太空了，想要你的赏金，请授予我！）
有趣的是，我的答案在4.0.7上工作得很好，但在4.0.2a上不起作用！没有任何线索，我检查了 4.0.2a 的来源，令人震惊地看到：
在 src / panel / Table.js （4.0.2a）
/ **
*滚动TablePanel deltaY
* @param {Number} deltaY
* /
scrollByDeltaY：function（deltaY）{
var verticalScroller = this.getVerticalScroller（） ;
if（verticalScroller）{
verticalScroller.scrollByDeltaY（deltaY）;
}
}，
/ **
*通过deltaX
* @param {Number} deltaY
* / $滚动TablePanel b $ b scrollByDeltaX：function（deltaX）{
var horizontalScroller = this.getVerticalScroller（）;
if（horizontalScroller）{
horizontalScroller.scrollByDeltaX（deltaX）;
}
}，
注意到什么？检查功能 scrollByDeltaX ！它错误地编码（固定在4.0.7）！这显然不会有任何视觉反馈。它要求垂直滚动条做一个deltaX滚动。怎么可能？
无论如何，要解决这个问题是很容易的，万一你不想升级到4.0.7。 Afaik 4.0.7具有从4.0.6继承的大量错误，它破坏了我的项目与这个令人担忧的掩护问题。
以下是我的工作答案，我希望你会很感激。基本上我修改了 onEditorTab 方法，并创建了一个事件挂钩，所以你的网格可以钩住它，并且
我不太确定如何做一个滚动最左边/最右边的滚动条，所以一个有趣的 Infinity 已经在我的代码中被用于懒惰。
这里是一个例子： 演示 （请记住尝试SHIFT + TAB）
/ **
*自定义行选择模型，当$ tab
*触发editortab事件时，
* /
Ext.define（'NS.RowModel'，{
extends：'Ext.selection.RowModel'，
//当您选择标签时，False将换行到下一行
//到一行结束
preventWrap：false，
initComponent：function（）{
/ **
* @event editortab
*当编辑器标签为$ b $时触发b * @param {RowModel} rowModel this rowmodel
* @param {Editor} edt编辑器
* @param {string} dir选项卡的方向（左或右）
* @ param {Event} e事件对象
* /
this.addEvents（'editortab'）;
this.callParent（）;
}，
//记住哪个是最后一个上下文
lastEditorContext：null，
onEditorTab：function（edt，e）{
//这段代码的一部分来自原来的onEditorTab，在
//src/selection/RowModel.js行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）;
//我们存储最后一个上下文，所以我们知道
//上下文是否已更改
me.lastEditorContext = edt.context;
//如果有新位置，编辑;否则，完成编辑。
if（newPosition）{
edt.startEditByPosition（newPosition）;
} else {
edt.completeEdit（）;
}
//如果上下文没有改变，我们尝试将
//移动到下一个，直到找到一个新的编辑框（上下文改变）
while（me.lastEditorContext === edt.context&& newPosition）{
newPosition = view.walkCells（newPosition，direction，e，this.preventWrap）;
if（newPosition）{
edt.startEditByPosition（newPosition）;
}
}
//触发事件
this.fireEvent（'editortab'，this，edt，direction，e）;
}
}）;
/ **
*自定义编辑器网格以支持tabb
* /
Ext.define（'NS.EditorGrid'，{
extends：' Ext.grid.Panel'，
initComponent：function（）{
var me = this;
Ext.applyIf（me，{
plugins：[Ext。创建（'Ext.grid.plugin.CellEditing'，{
clicksToEdit：1
}）]，
selModel：Ext.create（'NS.RowModel'，{
听众：{
editortab：{
fn：me.onEditorTab，
范围：我
}
}
}）
}）;
me.callParent（）;
}，
onEditorTab：function（sel，edt，dir，e）{
var lastRow = sel.lastEditorContext.rowIdx，
newRow = edt.context.rowIdx，
deltaX = 0;
//让我们先计算deltaX
//如果行更改，我们将单元格重置为最左边或最右边
if（lastRow！= newRow）{
deltaX = lastRow< newRow？无限：无限;
} else {
// else，do deltax :)
deltaX = edt.context.column.width *（dir =='right'？1：-1）;
}
//如果您使用的是4.0.2a，请使用此功能。他们在
//src/panel/Table.js，第1133行
var horizontalScroller = this.getHorizontalScroller（）;
if（horizontalScroller）horizontalScroller.scrollByDeltaX（deltaX）;
//但是，如果你正在运行4.0.7，这很好。使用这个：
//this.scrollByDeltaX（deltaX）;
}
}）;
// ---------------------------------------- ---------
//以下所有内容都保留:)
Ext.onReady（function（）{
var storeSr = Ext.create （'Ext.data.ArrayStore'，{
fields：[KD_SR，NM_SR]
}）;
//加载数据
var tmpd = [];
for（i = 1; i <= 15; i ++）{
tmpd.push（[i，nm+ i]）;
}
storeSr.loadData（tmpd）;
//创建列
col = []
col.push（{header：Kode，dataIndex：'KD_SR'}）;
for（j = 1; j <= 15; j ++）{
col.push（{
header：Header+ j，
width：100，
dataIndex：'NM_SR'，
编辑器：{xtype：textfield}
}）;
}
var gridSr = Ext.create（'NS。 EditorGrid'，{
height：200，
width：500，
store：storeSr，
columns：col
}）;
//创建窗口
var winEditSR = Ext.cr eate（Ext.Window，{
title：Sub Rayon，
autoWidth：true，
autoHeight：true，
autoShow：true，
border： false，
modal：true，
items：[gridSr]
}）;
}）;
我仍然想知道是否有更好的解决方案...或许使用列（头）的 x 来确定滚动的 scrollLeft ，但那会很漂亮jerky ...
i have a gridpanel with cellediting plugin, and with a lot of grid header
(at least make the grid shown it horizontal scrollbar)...
here is the DEMO...
there is a bug in my grid, try to edit one of the collumn, and then press tab key to navigate to header15..
the grid didn't scroll to where i am editing,...
is it a bug?? a have looking for this at their forum, but no luck..
so, how to fix it??
how to make my grid scroll to the active editor??
from docs, there is a method scrollByDeltaX,
but how to know the delta from active editor??
Cut it short, try demo first :)
(Too free, and wanted your bounty, please award me!)
Funny that my answer works just nice on 4.0.7, but it doesn't work on 4.0.2a! Out of no clue, I checked the source of 4.0.2a, and shockingly saw this:
In src/panel/Table.js (4.0.2a)
/**
* 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);
}
},
Noticed anything? Checkout the function scrollByDeltaX! It's coded wrongly (fixed in 4.0.7)!!! And this will obviously wouldn't have any visual feedback. It is asking the vertical scrollbar to do a deltaX scrolling. How can it be?
Anyway, to fix this problem is rather easy, in case you do not want to upgrade to 4.0.7. Afaik 4.0.7 has tons of bugs inherited from 4.0.6, and it breaks my project with that freaking masking issue.
Below is my working answer, and I hope you'll appreciate it. Basically I have modified the onEditorTab method and created an event hook, so your grid can hook onto it, and do the scrollByDeltaX when tabbing is triggered.
I'm not too sure how to do a scroll left most/right most, so a funny Infinity has been used in my code out of laziness.
Here is the example: DEMO (Remember to try out SHIFT+TAB too)
/**
* 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]
});
});
I still wondering if there might be a better solution... perhaps using column (header)'s x to determine scroller's scrollLeft, but that will be pretty jerky...
这篇关于如何将scrollToDeltaX的网格面板转换为主动编辑器（cellediting）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
