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

Question

我想在我的应用程序中使用 Extjs tree list。我的语言是从右到左（波斯语）。我希望树列表图标位于文本的右侧（在下面的示例中，从右侧开始： arrow icon - home icon - 文本图标)。

我该怎么做？

Answer 1

ExtJS6 support for RTL 有效，但您可能需要改进 CSS.

您可以从 Dashboard example 开始。

要使其成为 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属性。如您所见，树列表节点上的文本与图标过于封闭。

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

How do I set right direction in extjs 6 treelist

javascript

extjs

treelist