Блог

Я хочу реализовать маршрут для моего базового представления в ExtJS, чтобы при его отображении (при нажатии кнопки) URL-адрес изменялся, и когда я хочу вернуться к исходному представлению, он работает, отображая правильное представление.

Предоставление моего класса представления :

 Ext.define('Traccar.view.newDashboard', {
    extend: 'Ext.Container',
    alias: 'widget.newDashboard',
    id: 'geoAfricaDashboard',

routes : {
        'dashboard' : ''

     },

    layout: {
        type: 'border',
        align: 'stretch '
    },
    height: 620,

    style: {
        'backgroundColor': '#909090 !important'
    },

    items: [{
        // xtype: 'panel' implied by default
        title: 'Geo-Africa Administration',
        region: 'west',
        xtype: 'panel',
        //margin: '5 0 0 5',
        width: 200,
        collapsible: true, // make collapsible
        id: 'west-region-container',
        layout: 'fit',
        items: [{
            xtype: 'treelist',

            store: {
                root: {
                    expanded: true,
                    children: [{
                        text: 'Options',
                        leaf: true,
                        iconCls: 'fas fa-address-book'
                    }, {
                        text: 'Administration',
                        expanded: true,
                        iconCls: 'far fa-id-badge',
                        children: [{
                            text: 'Configuration',
                            leaf: true,
                            iconCls: 'fas fa-address-card'
                        }, {
                            text: 'User',
                            leaf: true,
                            iconCls: 'fas fa-child'
                        }]
                    }]
                }
            },
            renderTo: Ext.getBody()
        }]
    }, {
        xtype: 'basic-panels'

        // width: '100%'
    }]
  

Который я отображаю при нажатии кнопки следующим образом :

   var dash =  Ext.create('widget.newDashboard', {
               renderTo: Ext.getBody(),
                hideMode: 'visibility'
             });
              dash.show();
  

Как я могу назначить URI маршрута для этого представления в ExtJS (6.2.0)?

Спасибо за большую помощь? PS: я пытался с

 routes : {
        'dashboard' : ''

     },
  

или еще this.redirectTo("dashboard"); , но ни то, ни другое не работает.

Маршрут похож на запуск события. Конечным результатом является вызов функции. Хэш передается функции в зависимости от того, как настроен маршрут. Вы можете либо вызвать другую функцию для каждого хэша, либо использовать хэш или другие части URI, чтобы определить, что делать.

Документация по маршрутизатору На этой веб-странице описывается, как используется маршрутизатор. Это очень быстрое чтение.

Обычный способ, которым примеры (панель администратора, приложение для коллег) делают это, используя хэш в качестве xtype для панели (представления), которую вы хотите отобразить.

Итак, ваша главная панель расширяет ‘Ext.navigation.Просмотр ‘. Затем на основе хэша вы создаете новый экземпляр представления, добавляете его на главную панель и делаете активным элементом. Вы также можете проверить, был ли xtype уже добавлен в представление навигации, и просто сделать его активной панелью.

Скрипка, показывающая использование маршрутизатора (это не мое). Вот скрипка, которая показывает, как использовать маршрутизатор. Я бы рекомендовал сначала прочитать документы. Документы sencha на самом деле довольно хороши, и вы можете узнать, как использовать библиотеку Extjs так, как она была задумана, и действительно ускорить вашу разработку.