Блог

у меня есть gridpanel с плагином cellediting и с большим заголовком сетки
(по крайней мере, сделайте так, чтобы сетка отображалась горизонтальной полосой прокрутки)…
вот ДЕМОНСТРАЦИЯ…

в моей сетке ошибка, попробуйте отредактировать один из столбцов, а затем нажмите клавишу tab, чтобы перейти к заголовку15.. сетка не прокручивалась до того места, где я редактирую, …
это ошибка?? я искал это на своем форуме, но безуспешно..

итак, как это исправить??
как заставить мою сетку прокручиваться в активный редактор??

из документов есть метод scrollByDeltaX ,
но как узнать дельту из активного редактора??

Короче говоря, сначала попробуйте демо 🙂

(Слишком бесплатно, и хотел получить вашу награду, пожалуйста, наградите меня!)

Забавно, что мой ответ работает просто отлично на 4.0.7, но он не работает на 4.0.2a! Не имея понятия, я проверил источник 4.0.2a и с ужасом увидел это:

В 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);
    }
},
  

Заметил что-нибудь? Проверьте функцию scrollByDeltaX ! Он неправильно закодирован (исправлено в 4.0.7)!!! И это, очевидно, не будет иметь никакой визуальной обратной связи. Он запрашивает вертикальную полосу прокрутки для выполнения прокрутки deltaX. Как это может быть?

В любом случае, исправить эту проблему довольно просто, если вы не хотите обновляться до 4.0.7. Afaik 4.0.7 содержит множество ошибок, унаследованных от 4.0.6, и это нарушает мой проект из-за этой проблемы с маскировкой.

Ниже приведен мой рабочий ответ, и я надеюсь, вы его оцените. По сути, я изменил onEditorTab метод и создал перехват событий, чтобы вы grid могли подключиться к нему и выполнять scrollByDeltaX при запуске табуляции.

Я не слишком уверен, как выполнить прокрутку влево / вправо, поэтому Infinity в моем коде из лени использовался funny.

Вот пример: ДЕМОНСТРАЦИЯ (не забудьте также попробовать 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 amp;amp; 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 , но это будет довольно сложно…