javascript - 如何在 extjs 6 树列表中设置正确的方向

Question

我想在我的应用程序中使用Extjs 树列表。我的语言是从右到左的（波斯语）。我希望树列表图标位于文本的右侧（在以下示例中，从右侧开始： 箭头图标-主页图标-文本图标）。

我怎样才能做到这一点？

Answer 1

ExtJS6 支持 RTL工作，但您可能需要改进 CSS。

您可以从仪表板示例开始。

为了让它 RTL 做：

i) 在 MyDashBoard/classic/src/view/main/Viewport.js

Ext.define('Admin.view.main.Viewport', {
    extend: 'Ext.container.Viewport',
    xtype: 'mainviewport',

    requires: [
        'Ext.list.Tree',
        'Ext.rtl.*'
    ],
    rtl: true,
    controller: 'mainviewport',
    (...)

ii) 在同一个视图中，更改最后两项的顺序。使树列表成为最后一项。

    {
        xtype: 'maincontainerwrap',
        id: 'main-view-detail-wrap',
        reference: 'mainContainerWrap',
        flex: 1,
        items: [
            {
                xtype: 'container',
                flex: 1,
                reference: 'mainCardPanel',
                cls: 'sencha-dash-right-main-container',
                itemId: 'contentPanel',
                layout: {
                    type: 'card',
                    anchor: '100%'
                }
            }, {
                xtype: 'treelist',
                reference: 'navigationTreeList',
                itemId: 'navigationTreeList',
                ui: 'navigation',
                store: 'NavigationTree',
                width: 250,
                expanderFirst: false,
                expanderOnly: false,
                listeners: {
                    selectionchange: 'onNavigationTreeSelectionChange'
                }
            }
        ]
    }

之后，您需要调整一些 CSS 属性。如您所见，treelist 节点上的文本对图标过于封闭。