Ext.js DataGrid 选项卡导航在 RTL 模式下无法正常工作

Question

我在 RTL 模式下使用 Ext.js 4.2.2 的 DataGrid 组件

在该组件的官方示例中，我使用的是 CellEditing 插件。

当我在单元格编辑器中按 Tab 键进行选项卡导航时。 但是当单元格编辑器离开网格区域时，滚动条不会适应新的位置。

您可以在下图中看到问题。

我使用 Chrome 作为浏览器。

有什么想法吗？

Answer 1

在调试Ext.js代码大约2天后，我发现了问题。

问题出在 Dom.Element_Scroll 的一种方法中。

通过覆盖该方法，问题解决了。

最初的问题原因是，在 RTL 模式下没有规范化设置为容器元素的 scrollLeft 值。

你应该像这样改变方法。

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

到

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

滚动顶部也是如此。

使用的完整代码如下。

注意：我使用的是 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;
    },



});