CODEWITHSUNDEEP
extjsviewtouchpanels
Carl Dieryckx
Carl Dieryckx

Reputation: 53

panel not showing sencha touch 2

I'm trying to switch panels when tapping 'login' in a toolbar. My controller gets the event and I switch by adding and setting the active item to the panel I want.. however, the screen stays blank (and there are no debug errors).

This is the code of my panel, any idea what the mistake might be? 

Ext.define('App.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginpanel',
alias: 'widget.loginView',

fullscreen: true,
layout: 'fit',

items: [
    {
        xtype: 'TopToolBar'
    },
    {
            xtype: 'formpanel',
            items: [
            {
                xtype: 'fieldset',
                title: 'Login',
                instructions: 'Have a great day!',
                items: [
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },

                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                    }
                ]
            },

            {
                xtype: 'button',
                text: 'Login',
                ui: 'confirm',
                handler: function()
                {
                    this.up('loginpanel').submit();
                }
            }
        ]
    }]})

The code of my toolbar class:

Ext.define('App.view.TopToolBar', {
extend: 'Ext.Toolbar',
xtype: 'TopToolBar',
dock: 'top',
initialize: function() {
    var loginButton = {
        xtype: 'button',
        text: 'Login',
        ui: 'action',
        handler: this.onLoginTap,
        scope: this
    };

    this.add(loginButton);
},

onLoginTap: function(){
    console.log('login tap');
    this.fireEvent('loginBtnHandler', this);
}})

Upvotes: 1

Views: 255

Answers (1)

A1rPun
A1rPun

Reputation: 16857

Define classes with Ext.define. 

Ext.define('My.Toolbar', {
    extend: 'Ext.Toolbar',
    alias: 'widget.mytoolbar'
    //configuration
});

Create(Instantiate) classes with Ext.create

var tlb= Ext.create('My.Toolbar', {
    //configuration
});

Upvotes: 1

Related Questions