How do I set right direction in extjs 6 treelist

Question

I want to use a Extjs tree list in my application. My language is right-to-left(persian). I want tree list icons to be at right of text(in follow example, from right: arrow icon - home icon - text icon).

how can I do this?

Answer 1

ExtJS6 support for RTL works, but you probably need to improve the CSS.

You can start by the Dashboard example.

To make it RTL do:

i) In 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) In the same view, change the order of the last two items. Make the treelist the last item.

    {
        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'
                }
            }
        ]
    }

Afterwards, you need to adjust some CSS properties. AS you can see, the text on treelist nodes are too much closed to the icons.