ExtJS4 rtl 工具栏问题答案

【问题标题】：ExtJS4 rtl toolbar issueExtJS4 rtl 工具栏问题
【发布时间】：2011-08-02 12:35:44
【问题描述】：

我们正在将我们的应用程序升级到 ExtJS4。但是我们遇到了 ExtJS4 工具栏的问题。我想在工具栏中显示如下按钮。

但我得到如下。任何人有想法实现如上所示的格式？

ExtJS3 代码为：

// Toolbar
Ext.override(Ext.layout.ToolbarLayout ,{
    onLayout : function(ct, target){
        if(!this.leftTr){
            target.addClass('x-toolbar-layout-ct');
            target.insertHtml('beforeEnd',
                 '<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-right" align="right"><table cellspacing="0"><tbody><tr class="x-toolbar-right-row"></tr></tbody></table></td><td class="x-toolbar-left" align="left"><table cellspacing="0" class="x-toolbar-left-ct"><tbody><tr><td><table cellspacing="0"><tbody><tr class="x-toolbar-left-row"></tr></tbody></table></td><td><table cellspacing="0"><tbody><tr class="x-toolbar-extras-row"></tr></tbody></table></td></tr></tbody></td></tr></tbody></table>');
            this.leftTr = target.child('tr.x-toolbar-left-row', true);
            this.rightTr = target.child('tr.x-toolbar-right-row', true);
            this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
        }
        var side = this.rightTr;
        var pos = 0;

        var items = ct.items.items;
        for(var i = 0, len = items.length, c; i < len; i++, pos++) {
            c = items[i];
            if(c.isFill){
                side = this.leftTr;
                pos = -1;
            }else if(!c.rendered){
                c.render(this.insertCell(c, side, pos));
            }else{
                if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
                    var td = this.insertCell(c, side, pos);
                    td.appendChild(c.getDomPositionEl().dom);
                    c.container = Ext.get(td);
                }
            }
        }
        //strip extra empty cells
        this.cleanup(this.leftTr);
        this.cleanup(this.rightTr);
        this.cleanup(this.extrasTr);
        this.fitToSize(target);
    }
});

这些 ExtJS rtl 可以在以下 URL 中找到：

http://www.sencha.com/forum/showthread.php?78419-Extjs-RTL

但在 ExtJS4 中它不起作用。如果有人有想法，请与我们分享。帮助将不胜感激。

【问题讨论】：

是的，我添加了 extjs3 中的代码。请看一下。
从未使用这种方法制作工具栏。您是否已经尝试过for(var i = items.length-1, c; i >=0; i--, pos++)？
不，我没有尝试使用 for 循环，不仅工具栏我需要像上面一样反向显示分页工具栏和网格。

标签： javascript extjs extjs4 extjs3

【解决方案1】：

据我所知，ExtJS 4 还没有成熟到支持 RTL。等待 RTL 支持

【讨论】：