Help on switching views with buttons with MVC

[cyberwombat]

I'd like to understand how to switch views from a button. It seems that I can do so from either the control: in controller or the button handler and would like to see both examples (unless they are the same).

Also - what are the pros and cons of each approach? and are there other as well. And in the control section I used the ID of the button but wonder if that is the best way.

Thanks!

Here's my controller:

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',


    config: {


    },


    refs: [
        {
            ref: 'first',
            selector: '#first'
        },
        {
            ref: 'second',
            selector: '#second'
        }
    ],


    views : [
        'TestMain',
        'TestSecond'
    ],


     init: function() {
          this.getTestMainView().create();




        this.control({
            '#first': {
                tap: function() {
                    //how do I go to second view here?
                }
            },
            '#second': {
                tap: function() {
                }
            }
        });
    }
});

and my first view:

Ext.define('MyApp.view.TestMain', {
    extend: 'Ext.Container',
    xtype: 'testmain',


    config: {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
         items: [
                {
                    xtype: 'button',
                    ui: 'normal',
                    id: 'first',
                    text: 'Go To Second Screen',
                    handler: function() {


                        //how do I go to second view here?
                    }
                }
            ]
        }
});

and second view:

Ext.define('MyApp.view.TestSecond', {
    extend: 'Ext.Container',
    xtype: 'testsecond',


    config: {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
        items: [
                {
                    xtype: 'button',
                    ui: 'normal',
                    id: 'second',
                    text: 'Go To First Screen',
                    handler: function() {
                    }
                }
            ]
        }
});

[shweta.saxena09]

Same problem with me

[joseph09]

I got it to work by following the methods used in the kitchensink example

Create another view like this called Main

    Ext.define('MyApp.view.Main', {
        extend: 'Ext.Panel',
        id: 'mainView',
        requires: [
            'MyApp.view.TestMain',
            'MyApp.view.TestSecond'
        ],
        config: {
            fullscreen: true,

            layout: {
                type: 'card',
                animation: {
                    type: 'slide',
                    direction: 'left',
                    duration: 250
                }
            },

            items: [{
                xtype: 'testmain'
            }, {
                xtype: 'testsecond'
            }]
        }
    });

Then update your controller

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',

    config: {
    },

    refs: [
        {
            ref: 'main',
            selector: 'mainview',
            autoCreate: true,
            xtype: 'mainview'
        },
        {
            ref: 'first',
            selector: '#first'
        },
        {
            ref: 'second',
            selector: '#second'
        }
    ],

    views : [
        'Main',
        'TestMain',
        'TestSecond'
    ],


     init: function() {
          this.getTestMainView().create();




        this.control({
            '#first': {
                tap: this.goToSecondView
            },
            '#second': {
                tap: function() {
                }
            }
        });
    },


    goToSecondView: function() {        
        mainView = this.getMain();
        secondView= this.getSecond();
        mainView.setActiveItem(secondView);
    },

});

[cyberwombat]

Yes that makes sense to use the card now that I think about it for the slide transition. My question then would have to be rephrased without the transition then. How would I just switch controller actions/views? without transition? It seems like I have to access the main viewport and tell it which view to create/show but no idea how to do that and no example I could find made use of that kind of switch,

Thanks!

[cyberwombat]

So I am playing with this suggestion but cannot actually get it to work. Doesn't switch views. Any code missing here?

[kasperpihl]

I don't know if this helps.
but try in your views to replace xtype with alias.
Remember to add widget in front of the xtype name as below.
That works for me

//xtype: 'testsecond'
alias: 'widget.testsecond' 

[cocochambo]

I'm in the same situation. My example is very similiar to what suggested above. I was not able to swich to second 2 container after clicking the button. I viewed the object and everything there there but it did not change to 2nd panel for me.?

...
goToSecondView: function() {
mainView = this.getMain();
secondView= this.getSecond();
mainView.setActiveItem(secondView);
}
..

[AndreaCammarata]

I got it to work by following the methods used in the kitchensink example

Create another view like this called Main

Hi joseph.
First i suggest you to set the xtype of your second view to

    Ext.define('MyApp.view.Main', {
        extend: 'Ext.Panel',
        id: 'mainView',
        requires: [
            'MyApp.view.TestMain',
            'MyApp.view.TestSecond'
        ],
        config: {
            fullscreen: true,

            layout: {
                type: 'card',
                animation: {
                    type: 'slide',
                    direction: 'left',
                    duration: 250
                }
            },

            items: [{
                xtype: 'testmain'
            }, {
                xtype: 'testsecond'
            }]
        }
    });

Then update your controller

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',

    config: {
    },

    refs: [
        {
            ref: 'main',
            selector: 'mainview',
            autoCreate: true,
            xtype: 'mainview'
        },
        {
            ref: 'first',
            selector: '#first'
        },
        {
            ref: 'second',
            selector: '#second'
        }
    ],

    views : [
        'Main',
        'TestMain',
        'TestSecond'
    ],


     init: function() {
          this.getTestMainView().create();




        this.control({
            '#first': {
                tap: this.goToSecondView
            },
            '#second': {
                tap: function() {
                }
            }
        });
    },


    goToSecondView: function() {        
        mainView = this.getMain();
        secondView= this.getSecond();
        mainView.setActiveItem(secondView);
    },

});

Hi joseph.
First, I suggest you to set the xtype of your second view by writing

alias: 'widget.secondview'

Then, always in your second view, you will define a button with an "action" config:

...
{
     xtype: 'button',
     action: 'backtofirst',
     ui: 'back',
     text: 'First view'
}
...

Then, in your controller init function you have to control that button handler, simply writing

this.control({
      'mainview button[action=backtofirst]': {
           tap: this.backToFirst
     }
});

And finally you have to define your "backToFirst" function inside your controller, that will be able to create the SecondView widget and set it as the active one inside the MainView:

backToFirst: function(){
      this.getMain().setActiveItem(Ext.widget('secondview'));
}

Hope this helps.

[robertocarvajal]

Awesome!, the one thing I can't figure out is how to change the animation direction, seems like setActiveItem() doesn't support them in ST2, or maybe I'm missing something! I just want to change the direction of my default animation when I click the "Back" button in my app, any tips?

[AndreaCammarata]

Awesome!, the one thing I can't figure out is how to change the animation direction, seems like setActiveItem() doesn't support them in ST2, or maybe I'm missing something! I just want to change the direction of my default animation when I click the "Back" button in my app, any tips?

You have to update the animation directly on your card panel layout:

panel.getLayout().setAnimation({
        type: '<YOUR_ANIMATION>',
	direction: '<YOUR_DIR>,
	duration: '<YOUR_DURATION>'
});

Hope this helps.