Changing Views using MVC

I am new to Sencha Touch and trying to feel my way around. I am working on building a test application using a MVC structure I found online. It was going well but I am trying to the point where I want users to be able to navigate using a custom menu and I am not sure how to do this. I tried to use setActiveItem but it seems it is out of scope in my structure and I don't know what to do to fix this.

App.js

Code:

---

//AUTOMATICALLY LOAD DEPENDENCIES
Ext.Loader.setConfig({ enabled: true });


//LOAD THE PRIMARY APPLCIATION
Ext.application({
   
    phoneStartupScreen: 'images/sencha_logo.png',
    name: 'zlapp',
    cardAnimation: 'slide',
    controllers: ['home','conditions'],   


    launch: function() {       
        console.log('app launch');
        var screen = Ext.create('Ext.Panel', {
            fullscreen: true,
            id: 'screen',
            layout: 'card',
            items: [
                { xtype: 'home' },
                { xtype: 'simplelist' }               
            ]
        });
       
    }


});

---

Main View

Code:

---

//CREATES THE LOGO PANELvar logo = new Ext.Panel ({
    flex: 2,
    layout: 'vbox',
    html: 'Logo Goes Here'
});


//CREATES THE NEWS SWITCHER
var switcher = new Ext.Carousel({
    flex: 3,
    items: [
        { style: "background-color: #990000;" },
        { style: "background-color: #FFFFFF;" }
    ]
});


//CREATES THE LEFT COLUMN
var left = new Ext.Panel ({
    layout: {
          type: 'vbox',
          pack : 'center'
    },
    flex: 1,
    items: [
            {
                xtype: 'button',
                id: 'triggerConditions',
                text: 'Conditions'
            }
    ]


});


//CREATES THE LEFT COLUMN
var right = new Ext.Panel ({
    layout: {
          type: 'vbox',
          pack : 'center'
    },
    flex: 1,
    html: 'Right Column',
});




//CREATES THE HOMEPAGE MAIN CONTENT AREA
var content = new Ext.Panel ({
    flex: 8,
    layout: 'hbox',
    items: [left,right]
});




//EXTENDS EXT TO CREATE THE HOME PANEL
Ext.define('zlapp.view.home', {
    extend: 'Ext.Panel',
    alias: 'widget.home',
    config: {
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [logo,switcher,content]
    },
    initialize: function() {
        this.callParent();
    }
});

---

Main controller where I am trying to change the view.

Code:

---

Ext.define('zlapp.controller.home', {
    extend: 'Ext.app.Controller',   
    views: ['home'],
   
    init: function() {
        console.log('Init home controller');
        this.control({
            '#triggerConditions': { 'tap': function () {
                        console.log('Only the button with id=firstButton says Hello');
                        //zlapp.panel.setActiveItem('simplelist', {type: 'slide', direction: 'left'});
                        console.log(zlapp);
                    }
                }           
        });
    },
   
});

---

Basically, I am trying to switch from my home view to my simplelist view but can't figure out how to do it given the MVC structure I am working with.

setActiveItem should be able to take a component instance or an index... not a string.

Quote:

---

Originally Posted by mitchellsimoens

setActiveItem should be able to take a component instance or an index... not a string.

---

You are right, I was playing with the values to see if I could get a reponse but my problem seems to be deeper. My script is unable to call the method 'setActiveItem' because it is undefined. I get the following error but can't figure out how to access my viewport to change views.

Uncaught TypeError: Cannot call method 'setActiveItem' of undefined

that tells me you don't have the correct instance to do the setActiveItem on

Quote:

---

Originally Posted by mitchellsimoens

that tells me you don't have the correct instance to do the setActiveItem on

---

I understand that. I am trying to figure out how I do it properly given the provided code. I have spent a considerable amount of time on it and I must be missing something.

Here is code that I run in one of my controllers. It creates a view instance and throws it on top of the viewport. I'm not sure if this is the right way to do it, but I can get from page to page. I'm still learning the ins and outs of this tool.

TP is my app name. I'm calling this from the Main Controller which has listed Login and Main as views. I'm still trying to figure out the transition part of this...

PHP Code:

---

TP.view.MainV = this.getMainView().create();
Ext.Viewport.add(TP.view.MainV);
Ext.Viewport.setActiveItem(TP.view.MainV); 


---

Not sure if this is your issue but there is a bug that prevents the correct scope from being found - I had the hardest time trying to change cards until this was figured out. See here:

http://www.sencha.com/forum/showthre...-from-a-button

Also the single best resource for MVC card switching I have found is to analyze the SenchaCon app developed my Modus Create (look at the js source) it's a lot but totally worth it. You can find the app by searching for it and there is also some slides:

http://www.slideshare.net/senchainc/...-senchacon-app