Switching between views in ExtJS

[noiks]

How do we switch between two views in ExtJS?

Say my application has a welcome screen, a login screen and a register screen. The welcome screen has two buttons which navigate user to corresponding screens. Now for this I have created Welcome.js, Login.js and Register.js, these are views which contain the display logic of three screens. How do I switch/navigate between these views?

It would be great if you can point me to some documentaion/exapmle/post explaining the same.

[scottmartin]

Are there any of the examples that display the behavior you are looking for:
http://www.sencha.com/products/extjs/examples/

Take for instance these examples:
http://dev.sencha.com/deploy/ext-4.1...tml#basic-grid
http://dev.sencha.com/deploy/ext-4.1...ed-viewer.html
http://dev.sencha.com/deploy/ext-4.1...t-browser.html

Or there are tab options as well, new tab each time

Scott.

[noiks]

No, I did not find any example which depict the behavior I am looking for. I have searched extensively. All examples show same page navigation. What I am looking for is an alternative to ViewStack in flex. Basically it replaces the entire view in the screen with another view.

[evant]

http://docs.sencha.com/ext-js/4-1/#!...container.Card

[noiks]

@evant, thanks for the reply. I had seen this example, but was not sure as if this is the right approach. I was getting the below error,

Uncaught TypeError: Object has no method 'fireEvent' at :8080/MyApp/extjs/src/layout/container/Card.js:320

Below is my code,

app.js

Ext.application({
    name: 'MyApp',
    controllers: ['Users'],
    floating:true,
    launch: function() {
    Ext.create('Ext.panel.Panel', {
        layout: 'card',
        id:'mainContainer',
        items: [
                {
                    xtype: 'login'
                },
                {
                    xtype:'register'
                }
               ],
         renderTo: Ext.getBody()
    });
    Ext.getCmp('mainContainer').getLayout().setActiveItem(0);
    }    
})

Login.js

Ext.define('MyApp.view.user.Login' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.login',    
        title: 'Login',
            bodyPadding: 5,
            width: 350,
            floating: true,
            // Fields will be arranged vertically, stretched to full width
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            // The fields
            defaultType: 'textfield',
            initComponent:function(){
            this.items = [{
                fieldLabel: 'Username',
                name: 'first',
                allowBlank: false
            },{
                fieldLabel: 'Password',
                name: 'last',
                allowBlank: false,
                inputType: 'password' 
            }];


            // Reset and Submit buttons
            this.buttons = [{
                text: 'Reset',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Submit',
                formBind: true, //only enabled once the form is valid
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                     // I will be writing some other logic here. For now, suppose this is register button click
                        Ext.getCmp('mainContainer').getLayout().setActiveItem(1);
                    }
                }
            }];
            this.callParent(arguments);
}
        });

Users.js

Ext.define('MyApp.controller.Users', {
    extend: 'Ext.app.Controller',
    views: ['user.Login', 'user.Register'],
    init: function() {
        this.control({
            'panel': {
                render: this.onPanelRendered
            }
        });
    },


    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

I also have Register.js in my code. Now what am I doing wrong here? Along with the above error, it does not display anything on screen.
Also, is this the right way to do this or is there any better way to achieve this?

[kivras]

I get the same error (Object has no method 'fireEvent') when trying to switch card's if i define a constructor on that card.
Also when i replace the constructor of that card with an initComponent function i get the error "

Cannot read property 'length' of undefined "

If i don't define anything on the card and just enter configurations it works fine......
Help please this is driving me nuts.

[noiks]

Can you put your code here?

[kivras]

Important code is on Bold

The controller

Ext.define('chronobiller.controller.ClientTab',{
    extend:'Ext.app.Controller',
    init:function(){
        this.control({
           '#overviewBtn,#billingInfoBtn':{
               click:this.onNavBtnClick,
               scope:this
           }
        });
    },
    
    onNavBtnClick:function(btn){
        var itemId=btn.getItemId();
        btn.findParentByType('clienttab').getLayout().setActiveItem(itemId.substring(0,itemId.length-3)+'Card');
       
    }
    
});

Ext.define('chronobiller.view.MainContentTabs.ClientTabPanel', {
    extend:'Ext.panel.Panel',
    closable:true,
    alias:'widget.clienttab',
    layout:'card',
    activeItem:0,
    requires:[
        'chronobiller.view.MainContentTabs.EditClientForm'
    ],
    
    constructor:function(cfg){
        
        this.title=cfg.companyName;
        this.clientId = cfg.clientId;
        this.tbar = 
            {
                xtype:'toolbar',
                height:100,
                items:[
                    {
                        xtype:'button',
                        iconCls:'btnIcon80',
                        icon:'resources/images/calendar80.png',
                        iconAlign:'top',
                        width:120,
                        height:100,
                        itemId:'overviewBtn',
                        html:'<span class="btnText120">Overview</span>'
                    },{
                      xtype:'tbseparator',
                      height:90
                      
                    },
                    {
                        xtype:'button',
                        itemId:'billingInfoBtn',
                        iconCls:'btnIcon80',
                        icon:'resources/images/calendar80.png',
                        iconAlign:'top',
                        width:120,
                        height:100,
                        html:'<span class="btnText120">Billing info</span>'
                    },'->',
                    {
                        xtype:'container',
                        html: this.formatHeader(cfg.companyName,cfg.clientId),
                        height:100,
                        width:600
                        
                    }
                ] 
            };
            
            this.items = [
                {
                    itemId:'overviewCard',
                    html:'card1'
              
                },
                {
                    
                    itemId:'billingInfoCard',              
                    xtype:'editclientform'
                    
                }
                   
                
            ]
          
        
        this.callParent();
    },
    
    formatHeader:function(title,id){
        return '<span class="clientTabHeader">'+title+
            '</br>Client id:'+id+
            '</span>'
    }
    
 
    
});

The card

Ext.define('chronobiller.view.MainContentTabs.EditClientForm', {
    extend:'Ext.panel.Panel',
    alias:'widget.editclientform',
    constructor:function(){
    this.callParent();
    }


});

[kivras]

Ok issue solved.

I had to place my custom panel inside an items attribute.

 {
                    
                    itemId:'billingInfoCard',
                    items:[
                        {xtype:'editclientform'}
                    ]
                }

Although i did this when trying to solve the issue, again i had errors.
Seems i was so unlucky that when i found the solution , i changed something else and got an error again.