Sencha Touch 2 MVC - how to switch views with button

Question

I have this 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 these 2 views:

    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?
                    }
                }
            ]
        }
});

...

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

I would like the second view to load when I click on first button and vice versa when I click on second button. It seems I can add code either in my button handler or in the control section - I would appreciate an example of both (unless they are the same) and maybe an explanation as to which method is best and why.

Note that I do NOT want to use card layout or tabpanel - I want to know how to switch from one standalone view to another (In my app I have a card panel and a tab pabel and I need to switch between both groups using buttons)

Thanks!!

score 13 · Accepted Answer · answered Oct 28 '11 at 10:54

Instead of the handlers, you should use this.control in the controller:

this.control({
    '#first': {
        tap: function() {
            Ext.Viewport.add({
                xtype: 'testsecond'
            });
        }
    },

(you can drop the handlers: from the button in the view definition)

Also, you probably shouldn't hard-code ids in the first place.

The way I handle buttons like this is:

items: [
            {
                xtype: 'button',
                ui: 'normal',
                text: 'Go To First Screen',
                go: 'testsecond'
            },
       ...

Then in a base controller that applies to all views, I do something like:

this.control({
    'button[go]': {
        tap: function(btn) {
            Ext.Viewport.setActiveItem({
                xtype: btn.go
            });
        }
    },

I believe to get access to the 'go' parameter that it's in fact: btn.config.go (at least for me with ST 2.0.1) — creamcheese, Apr 30 '12 at 16:02
@DominicWatson this was an earlier version. As for ST 2.0.1, you can create a button subclass, set "go" as a config option, and just use .getGo() on the button, as with all other config options. — Attila O., May 03 '12 at 18:06

score 7 · Answer 2 · edited May 14 '13 at 11:35

7

Excellent answer but beware that calling setActiveItem() with just an xtype will create new views instead of reusing the ones that are already created, I ended up using Ext.ComponentQuery to get the target first and then setActiveItem on that, here's the code:

this.control({
        'button[go]': {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('my-custom-viewport-xtype');
                    target = Ext.ComponentQuery.query(btn.go);
                    viewport[0].setActiveItem(target[0]);
                }
            }
    });

Also note that I use a custom viewport to add slide effects and such, but calling directly Ext.Viewport.setActiveItem() like the previous example will work as well.

edited May 14 '13 at 11:35

DD_

7,230
11
38
59

answered Nov 11 '11 at 00:15

Roberto

446
5
11

1

I ended up ripping apart the SenchaCon app - it uses a controller per view and has a method to destroy each previous view. – cyberwombat Nov 12 '11 at 01:03
1

are those sources publicly available?? I'd like to take a look as well, since there is no much documentation about ST2 yet.. I still wonder if its really better to destroy/create each time rather than create once and resuse.. – Roberto Nov 12 '11 at 16:46
second that. It would be really helpful if we had a real app to dissect – Vassilis Jan 19 '12 at 13:57

score 1 · Answer 3 · answered Nov 25 '13 at 22:31

1

This worked for me:

handler: function() {
    //how do I go to second view here?

    Ext.Viewport.setActiveItem(Ext.create('MyApp.view.TestSecond')); 
}

answered Nov 25 '13 at 22:31

JJ_Coder4Hire

4,706
1
37
25

score 1 · Answer 4 · answered Mar 15 '12 at 08:57

1

First we need to check if that xtype is already created or not. Following code will do that

var xtypeToDisplay = Ext.ComponentQuery.query(btn.go)[0];

if (xtypeToDisplay == undefined)
{
    xtypeToDisplay= Ext.create('Class_Name_for_that_Xtype');
}

answered Mar 15 '12 at 08:57

Tahir Rauf

239
1
2
9

Sencha Touch 2 MVC - how to switch views with button

4 Answers4

Linked