extjs redirectTo method called twice from another controller

Question

The problem is in redirectTo calling onLoad method twice. From my main viewport extra views are loading dynamically.

Having main viewport

Ext.define('MyApp.main.view.MainView', {
    extend: 'Ext.container.Container',
    id: 'mainViewPort',
    requires: [
        'MyApp.main.controller.MainViewController',
    ],
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'border'
    },
    items: [{
        region: 'center'
    }]
});

viewport controller

Ext.define('MyApp.main.controller.MainViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',
    onClickQueryResponses: function() {
        var panelToAddName = Ext.create('MyApp.requests.view.QueryResponsesGridView', {});
        var mainViewPort = Ext.getCmp('mainViewPort');
        var centerRegion = mainViewPort.down('[region=center]');
        centerRegion.removeAll();
        centerRegion.add(panelToAddName);
    }
});

view 'MyApp.requests.view.QueryResponsesGridView'

Ext.define('MyApp.requests.view.QueryResponsesGridView', {
    extend: 'Ext.grid.Panel',
    requires: [
        'MyApp.requests.controller.QueryResponsesGridViewController'
    ],
    controller: 'queryResponsesGrid',
    dockedItems: [{
            xtype: 'toolbar',
            items:[{
                xtype: 'button',
                margin: '0 30 0 4',
                handler: 'onClickQuerySearch'
            }]
        }]
    });
});

controller of view 'MyApp.requests.view.QueryResponsesGridView'

Ext.define('MyApp.requests.controller.QueryResponsesGridViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.queryResponsesGrid',
    routes : {
        'responses': {
            action  : 'onLoad'
        }
    },
    onLoad: function() {
        this.redirectTo('responses');
        alert('!');
    },
    onClickQuerySearch: function() {
        this.onLoad();
    },
});

When I click button with handler onClickQuerySearch alert('!') is running twice, do anyone know why?

here is the fiddle https://fiddle.sencha.com/#fiddle/oqb

Answer 1

I don't think you need to call redirectTo in the onLoad method. You are basically creating a self-referencing loop. redirectTo is then calling onLoad again.

I think possibly you want the redirectTo in the onClickQuerySearch instead of calling onLoad directly:

Ext.define('MyApp.controller.QueryResponsesGridViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.queryResponsesGrid',
    routes : {
        'responses': {
            action  : 'onLoad'
        }
    },
    onLoad: function() {
        alert('!');
    },
    onClickQuerySearch: function() {
        this.redirectTo('responses');
    }
});