1. #1
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Answers
    6
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default Answered: Help on switching views with buttons with MVC

    Answered: Help on switching views with buttons with MVC


    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:
    Code:
    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:
    Code:
    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:
    Code:
    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() {
                        }
                    }
                ]
            }
    });

  2. Quote Originally Posted by joseph09 View Post
    I got it to work by following the methods used in the kitchensink example

    Create another view like this called Main
    Code:
    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
    Code:
    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

    Code:
    alias: 'widget.secondview'
    
    Then, always in your second view, you will define a button with an "action" config:

    Code:
    ...
    {
         xtype: 'button',
         action: 'backtofirst',
         ui: 'back',
         text: 'First view'
    }
    ...
    Then, in your controller init function you have to control that button handler, simply writing

    Code:
    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:

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

  3. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    Same problem with me

  4. #3
    Sencha User
    Join Date
    Nov 2007
    Posts
    29
    Vote Rating
    0
    joseph09 is on a distinguished road

      0  

    Default


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

    Create another view like this called Main
    Code:
        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
    Code:
    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);
        },
    
    });

  5. #4
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Answers
    6
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default


    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!

  6. #5
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Answers
    6
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default


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

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    16
    Answers
    2
    Vote Rating
    0
    kasperpihl is on a distinguished road

      0  

    Default


    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
    PHP Code:
    //xtype: 'testsecond'
    alias'widget.testsecond' 

  8. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    cocochambo is on a distinguished road

      0  

    Default Help on MVC with switching buttons.

    Help on MVC with switching buttons.


    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);
    }
    ..

  9. #8
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by joseph09 View Post
    I got it to work by following the methods used in the kitchensink example

    Create another view like this called Main
    Code:
    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
    Code:
    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

    Code:
    alias: 'widget.secondview'
    
    Then, always in your second view, you will define a button with an "action" config:

    Code:
    ...
    {
         xtype: 'button',
         action: 'backtofirst',
         ui: 'back',
         text: 'First view'
    }
    ...
    Then, in your controller init function you have to control that button handler, simply writing

    Code:
    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:

    Code:
    backToFirst: function(){
          this.getMain().setActiveItem(Ext.widget('secondview'));
    }
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  10. #9
    Sencha User
    Join Date
    Sep 2008
    Posts
    23
    Vote Rating
    0
    robertocarvajal is on a distinguished road

      0  

    Default


    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?

  11. #10
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by robertocarvajal View Post
    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:

    Code:
    panel.getLayout().setAnimation({
            type: '<YOUR_ANIMATION>',
    	direction: '<YOUR_DIR>,
    	duration: '<YOUR_DURATION>'
    });
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/