Блог

Главная - Вопросы по программированию - Как перенаправить на другое представление при нажатии кнопки (ExtJS 6.2)

Как перенаправить на другое представление при нажатии кнопки (ExtJS 6.2)

#extjs #extjs5

#extjs #extjs5

Вопрос:

У меня этот класс кнопок определен следующим образом :

 Ext.define('Mine.view.buttons', {
    extend: 'Ext.container.Container',
    alias: 'widget.MyClass',
    requires: [
            'Mine.view.Main',
            'Mine.view.newDashboard'
        ],
    xtype: 'myclass',
    items: [{
        xtype: 'button',
        html: '<img src="../../iDeviceMap.png" width="76" height="76"/>',
        text: '',
        width: 76,
        height: 76,
        handler: function() {

this.redirectTo('main', true);

    }]
});

Который я встраиваю в вид панели вместе с другими компонентами (составляющими основной вид), определенными в другом классе.
Моя проблема в том, что this.redirectTo('main', true); это не работает. Как выполнить перенаправление с правильным «этим» в главном представлении, где определена кнопка (скажем, Mine.view.Main)?
Q2: как вызвать родительское представление (Mine.view.Main) из обработчика кнопки?

Спасибо.

Ответ №1:

Обработчик кнопки должен быть функцией в контроллере. Метод в контроллере с затем вызывает метод redirectTo .

Или вы можете получить контроллер панели в обработчике кнопки и вызвать его оттуда …. лучше всего сделать это в контроллере, поэтому, если вы пишете другое представление для телефона или планшета, каждое представление может совместно использовать контроллер.

Скрипка, показывающая панели переключения

Та же скрипка, чтобы вы могли видеть изменение хэша

РЕДАКТИРОВАТЬ: @ltes — я написал скрипку, которая делала то, что вы хотели, чтобы она делала. Вы задаете вопрос о двух методах. Для вас было бы намного быстрее просто просмотреть документацию по каждому из этих методов.

Метод Ext.create
Метод Ext.Container down

Вы не понимаете, какой набор инструментов вы используете. Ext.Create создаст новый объект this.getView().down и up() посмотрите в иерархии, чтобы найти компонент. Если вы хотите заменить панель, используйте методы remove() и add() на панели. Вам не нужно выполнять Ext.create при добавлении, вы можете просто передать конфигурацию:

 panel.add({
    xtype: 'panel',
    title: 'This is my new panel',
    html: 'new panel data'
}

Комментарии:

1. Хорошо, спасибо, в обработчике вместо того, чтобы делать this.getView() , как вы, я создаю представление, используя Ext.create('widget.main'); , правильно ли это делать? Также я хочу переключиться на представление, когда я устанавливаю добавление URL #main -адреса, для этого я добавляю маршрут к представлению, но он не работает, в чем может быть проблема?

2. Также, когда я использую кнопку «Назад» навигатора, URL-адрес обновляется, но не перезагружает страницу и не обновляет представление.

3. вторая скрипка, указанная в моем ответе, кнопка «Назад» и предыдущая кнопка работают должным образом.

4. я все еще не понимаю, как работает маршрутизация в ExtJS: отображается ли представление автоматически при совпадении маршрута или вам нужно создать представление в обработчике?

5. Вы должны создать представление и отобразить его в обработчике. Это просто запуск события и вызов обработчика. Как вы можете видеть в созданной мной скрипке, когда маршрут является panelone, вызывается функция onPanelOne. onPanelOne устанавливает активный элемент в panel one с помощью setActiveItem на панели вкладок. Итак, да, вам нужно выполнить всю работу, которую выполняет маршрутизация, — это изменение хэштега и обработка истории.