1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    zipline is on a distinguished road

      0  

    Post Unanswered: Changing Views using MVC

    Unanswered: 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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,215
    Answers
    3517
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    setActiveItem should be able to take a component instance or an index... not a string.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,215
    Answers
    3517
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    that tells me you don't have the correct instance to do the setActiveItem on
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    zipline is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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.

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Answers
    2
    Vote Rating
    3
    FrankK is on a distinguished road

      0  

    Default


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

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

      0  

    Default


    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