[英]how to scrollToDeltaX gridpanel to the active editor(cellediting)?
簡而言之, 請先嘗試演示 :)
(太免費了,想要得到賞金,請獎勵我!)
有趣的是我的答案在4.0.7上很好用,但在4.0.2a上卻沒有用! 毫無頭緒,我檢查了4.0.2a
的源,並震驚地看到了這一點:
在src/panel/Table.js
( src/panel/Table.js
)中
/**
* 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);
}
},
注意到什么了嗎? 簽出功能scrollByDeltaX
! 代碼編碼錯誤(已在4.0.7中修復)!!! 這顯然不會有任何視覺反饋。 它要求垂直滾動條進行deltaX滾動。 怎么可能?
無論如何,如果您不想升級到4.0.7,修復此問題相當容易。 Afaik 4.0.7具有從4.0.6繼承的大量錯誤,它以那個令人毛骨悚然的掩蔽問題破壞了我的項目。
以下是我的工作答案,希望您能滿意。 基本上,我已經修改了onEditorTab
方法並創建了一個事件掛鈎,因此您的grid
可以掛鈎到該grid
上,並在觸發制表鍵時執行scrollByDeltaX
。
我不太確定如何最左/最右滾動,因此出於懶惰,我的代碼中使用了一個有趣的Infinity
。
這是示例: DEMO (請記住也要嘗試SHIFT + TAB)
/**
* 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]
});
});
我仍然想知道是否有更好的解決方案...也許使用column( header
)的x
來確定滾動條的scrollLeft
,但是那會很生澀...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.