Ext.js DataGrid tab navigation not working correctly in RTL mode

Question

I am using DataGrid component of Ext.js 4.2.2 in RTL mode

In official example of that component I am using CellEditing plugin.

When I press the tab key for tab navigation in cell editor. But when the cell editor gets out of grid region the scroll bar doesn't adapt itself to new position.

You can see the problem in following image.

I am using Chrome as browser.

Any idea?

Answer 1

After debugging Ext.js code for about 2 days I found the problem.

The problem was in one of Dom.Element_Scroll's methods.

With overriding that method the problem solved.

Originally the problem cause was, not normalizing scrollLeft value for setting to container element in RTL mode.

you should change methods like this.

me.scrollChildFly.attach(container).ScrollTo('left', newPos, animate);

To

me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);

and the same for scroll top.

The full code to use is as follows.

NOTE: I am using Ext.JS 4.2.2

*/
Ext.define('Ext.rtl.dom.Element_scroll', {
    override: 'Ext.dom.Element',
    /**
     * Scrolls this element into view within the passed container.
     * @param {String/HTMLElement/Ext.Element} [container=document.body] The container element
     * to scroll.  Should be a string (id), dom node, or Ext.Element.
     * @param {Boolean} [hscroll=true] False to disable horizontal scroll.
     * @param {Boolean/Object} [animate] true for the default animation or a standard Element
     * @param {Boolean} [highlight=false] true to {@link #highlight} the element when it is in view.
     * animation config object
     * @return {Ext.dom.Element} this
     */
    scrollIntoView: function (container, hscroll, animate, highlight) {
        var me = this,
            dom = me.dom,
            offsets = me.getOffsetsTo(container = Ext.getDom(container) || Ext.getBody().dom),
        // el's box
            left = offsets[0] + container.scrollLeft,
            top = offsets[1] + container.scrollTop,
            bottom = top + dom.offsetHeight,
            right = left + dom.offsetWidth,
        // ct's box
            ctClientHeight = container.clientHeight,
            ctScrollTop = parseInt(container.scrollTop, 10),
            ctScrollLeft = parseInt(container.scrollLeft, 10),
            ctBottom = ctScrollTop + ctClientHeight,
            ctRight = ctScrollLeft + container.clientWidth,
            newPos;

        // Highlight upon end of scroll
        if (highlight) {
            if (animate) {
                animate = Ext.apply({
                    listeners: {
                        afteranimate: function () {
                            me.scrollChildFly.attach(dom).highlight();
                        }
                    }
                }, animate);
            } else {
                me.scrollChildFly.attach(dom).highlight();
            }
        }

        if (dom.offsetHeight > ctClientHeight || top < ctScrollTop) {
            newPos = top;
        } else if (bottom > ctBottom) {
            newPos = bottom - ctClientHeight;
        }
        if (newPos != null) {
            //previous : me.scrollChildFly.attach(container).ScrollTo('top', newPos, animate);
            me.scrollChildFly.attach(container).rtlScrollTo('top', newPos, animate);
        }

        if (hscroll !== false) {
            newPos = null;
            if (dom.offsetWidth > container.clientWidth || left < ctScrollLeft) {
                newPos = left;
            } else if (right > ctRight) {
                newPos = right - container.clientWidth;
            }
            if (newPos != null) {
                // previous : me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
                me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
            }
        }
        return me;
    },



});