1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    1
    noiks is on a distinguished road

      0  

    Default Unanswered: Switching between views in ExtJS

    Unanswered: Switching between views in ExtJS


    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    1
    noiks is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,159
    Vote Rating
    674
    Answers
    474
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    1
    noiks is on a distinguished road

      0  

    Default


    @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
    Code:
    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
    Code:
    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
    Code:
    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?

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    11
    Vote Rating
    0
    kivras is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    1
    noiks is on a distinguished road

      0  

    Default


    Can you put your code here?

  8. #8
    Sencha User
    Join Date
    Aug 2012
    Posts
    11
    Vote Rating
    0
    kivras is on a distinguished road

      0  

    Default


    Important code is on Bold

    The controller

    Code:
    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');
           
        }
        
    });
    Code:
    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

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

  9. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    11
    Vote Rating
    0
    kivras is on a distinguished road

      0  

    Default


    Ok issue solved.

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

    Code:
     {
                        
                        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.