如何在extjs 6 treelist中设置正确的方向

Question

我想在我的应用程序中使用Extjs树列表。我的语言是right-to-left(persian).我希望树列表图标在文本的右边(在下面的示例中，从右开始：箭头图标- home图标-文本图标)。

，我该怎么做？

​

Answer 1

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

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

为了使它成为RTL，它做：

( i)在MyDashBoard/古典/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',
    (...)

(二)在同一观点下，更改最后两个项目的顺序。让树列表成为最后一项。

    {
        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节点上的文本对图标关闭得太多了。

​

​