Sencha touch 2.0 can't set activeitem on viewport

Question

I am playing with sencha touch 2.0 at the moment and i am having the following problem.

I am trying to set the activeitem on my viewport but according to my debug console the function is not being recognized. Yes my layout = card.

Can someone please tell me how i can change my view !

Here's my code

this is where it goed wrong :

//THIS IS WHERE IT GOES WRONG

                    App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

i also tried

this.App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

but that gives the same error: setActiveItem does not exist:

Uncaught TypeError: Object function () {
                    return this.constructor.apply(this, arguments);
                } has no method 'setActiveItem'

The rest of the code if needed : App.js

Ext.Loader.setConfig(
{ 
    enabled: true ,
    paths:{
        //set application path 
        App: 'app'
    }

});

// Main application entry point
Ext.application({
    name: 'App',  
        //Define all models and controllers in the application
        //Views do not have to be defined these are defined in the controllers

        //Models 

        //Controllers
        controllers: ['User'],
        //automatically create a viewport(template) instance/object  app/Viewport.js
        autoCreateViewport: true,
    launch: function() {              


    }
});

Viewport

Ext.define('App.view.Viewport', {
    extend: 'Ext.viewport.Default',
    xtype: "Viewport",


    config: {


        fullscreen:true,
        layout:     "card",
        items:[
            {
                xtype: "panel",
                scrollable:true,
                items: [
                    {
                        xtype:"toolbar",
                        title:"Test app"
                    },
                    {
                        xtype:"UserLoginView",
                        id: "LoginForm"
                    }
                ]
            }
        ]
    }

});

Controller where everything is happening

//Define controller name 
Ext.define('App.controller.User', {
    //Extend the controller class
    extend: 'Ext.app.Controller',
    views: ['user.Login','user.Index'],
    refs: [
        {
            selector:"#userLogin",
            ref: 'LoginUserLogin'
        },
        {
            selector:"#userPassword",
            ref: "LoginUserPassword"
        },
        {
            selector: "Viewport",
            ref: "Viewport"
        },
        {
            selector: "UserIndex",
            ref: "UserIndex"
        }
    ],
    //define associated views with this controller


    init: function()
    {
        //do something and setup listeners

        //setup listeners 
        this.control({
            '#UserLoginButon' : {
                tap : this.login

            }
        });
    },

    //handle
    login : function  (object)
    {
        //iniate loading screen for user
        var loadingScreen = new Ext.LoadMask(Ext.getBody(),{msg: ""});
        loadingScreen.show();


        //get form values 
        var username = this.getLoginUserLogin().getValue();
        var password = this.getLoginUserPassword().getValue();

        //check for empty fields
        if(username == "" || password == "")
        {
            loadingScreen.hide();
            Ext.Msg.alert("Foutmelding","Je dient alle velden in te vullen.");
        }
        else
        {
            Ext.Ajax.request(
            {
                url: '../backend/users/login/'+username+'/'+password,
                method: 'post',
                failure : function(response)
                {
                    loadingScreen.hide();
                    data = Ext.decode(response.responseText);
                    Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
                },
                success: function(response, opts) 
                {
                    data = Ext.decode(response.responseText);

                    if (data == true)
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("ingelogd!","welkom");

                        //THIS IS WHERE IT GOES WRONG 
                        App.view.Viewport.setActiveItem("App.view.user.Index",{
                            type: "slide",
                            direction: "left"
                        });




                    } else 
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("Foutmelding","Gebruikersnaam of wachtwoord klopt niet.");
                    }
                }
            });




        }
         console.log(App);









    },
    loginRequest : function (username, password)
    {

    }



});

Roberto Roberto · Accepted Answer · 2011-11-11T00:32:49

According this post at the Sencha Forum http://www.sencha.com/forum/showthread.php?150668-ExtJS4-to-ST2 you shouldn't call Ext.Viewport directly in Sencha Touch 2, so I tried to create my own Viewport class and it worked, here's what I did:

app.js

Ext.Loader.setConfig({enabled:true});
Ext.application({
        name: 'MyApp',
        controllers: ['MyController'],
        autoCreateViewport: true,
        launch: function() {
            console.log('launch!');
        }
    });

view/Viewport.js

Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Container',
xtype: 'my-viewport',
config: {
    layout: {
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        }
    },
    fullscreen: true,
    items: [{xtype: 'my-list'}, {xtype: 'my-detail'}]
}
});

controller/MyController.js

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: ['Navbar', 'List', 'Detail'],
init: function() {
    console.log('MyController init');

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

This controller will basically look for any button with the "go" parameter and setActiveItem() to that value, so you just have to tell the button to go to the xtype of your view, like this:

{
    xtype: 'button',
    text: 'detail view!',
    go: 'my-detail',
    width: '20%'
}

Sencha touch 2.0 can't set activeitem on viewport

2 Answers