Question

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

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

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

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

我使用Chrome作为浏览器。

有什么想法吗？

enter image description here

Answer 1

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

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

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

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

你应该改变这样的方法。

me.scrollChildFly.attach（容器）.ScrollTo（＆＃39; left＆＃39;，newPos，animate）;

要

me.scrollChildFly.attach（container）.rtlScrollTo（＆＃39; left＆＃39;，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;
    },



});

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

1 个答案: