CODEWITHSUNDEEP
sencha-touch-2
RobbeR
RobbeR

Reputation: 485

Sencha Touch 2 - switch views

I started to use the Sencha Touch 2 MVC, but I can't overcome the problem below. I have an Ext.application code:

Ext.application({
    name: 'ProjectName',
    appFolder: APP_URL + "app",
    enableQuickTips: true,
    extend: 'Ext.app.Controller',
    phoneStartupScreen: 'LOGO.png',

    controllers: ['Site'],

    views: ['Viewport_login', 'Viewport_reg'],
    layout: 'vbox',



    launch: function() {
        //bootstrap

        Ext.create("Ext.Container", {
            requires: [

            ],
            items: [
                Ext.create("ProjectName.view.Viewport_login", {}),
                Ext.create("ProjectName.view.Viewport_reg", {})

            ]
        });


       return true;

    }

});

view 'Viewport_login' code:

Ext.define('ProjectName.view.Viewport_login', {
    extend: 'Ext.Panel',

    requires: [
        'ProjectName.view.Login',
        'ProjectName.view.Header'
    ],


    fullscreen: true,

    initialize: function() {
        console.log("init viewpor_login");
        Ext.create("Ext.Container", {
            //fullscreen: true,
            style: 'background-color: white;',
            layout: 'vbox',
            fullscreen: true,
            scrollable: true,


            items: [
                {
                    xtype: 'Bheader'
                },              
                Ext.create("widget.login")
            ]
        });

        this.callParent();
    }

});

View 'Viewpoer_reg' code:

Ext.define('ProjectName.view.Viewport_reg', {
extend: 'Ext.Panel',

requires: [
    'ProjectName.view.Reg',
    'ProjectName.view.Header'
],


fullscreen: true,

initialize: function() {
    console.log("init viewpor_reg");
    Ext.create("Ext.Container", {
        //fullscreen: true,
        style: 'background-color: white;',
        layout: 'vbox',
        fullscreen: true,
        scrollable: true,


        items: [
            {
                xtype: 'Bheader'
            },  
            Ext.create("widget.reg")
        ]
    });

    this.callParent();
}

});

view 'Header' code:

Ext.define('ProjectName.view.Header', {
extend: 'Ext.Panel',
alias: 'Bheader',
xtype: 'Bheader',

requires: [
    'Ext.Img'
],

initialize: function() {
    console.log("header inited");
},

config: {
    cls: 'bg-holder',
    items: [
        Ext.create("Ext.Img", {
            src: BASE_URL + 'assets/images/header3.png',
            height: 35,
            width: "100%",
            style: "background-position: center 0px; "
        })
    ]
}
});

And finally the 'Site' controller's code:

Ext.define('ProjectName.controller.Site', {
extend: 'Ext.app.Controller',   


config: {
    views: ['Viewport_login', 'Viewport_reg']

},


init: function() {
    console.log('Init site controller');
    // Start listening for events on views


    this.control({
        // example of listening to *all* button taps
        '#login_button': {          
            tap: function () {

                // HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
            } 
        }           
    });

},

renderRegFOrm: function() {

},

onLaunch: function() {
    console.log('onLaunch site controller');
},
});

First, I have a problem right now: The 'Header' does'nt appear if I load both views ('Viewport_login', 'Viewport_reg') in Container which created in Ext.application launch function. Can anyone help me, why?

Second, in the Controller code you can see the this.control(... section. How can I switch to other view in here?

Upvotes: 1

Views: 2688

Answers (1)

Jay
Jay

Reputation: 3531

From looking at your code, it appears that you only want one of login and register to appear at one time. I would recommend looking at the setActiveItem method for containers and switching views in this way.

I didn't understand your first question. Also, didn't understand why you have widget.login and widget.reg classes when you already have views called login and reg (can't you just use those?)

Upvotes: 1

Related Questions