redned
redned

Reputation: 301

How to move between panels in Sencha touch

When moving between panels I get the following error

[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`. 

I can go back to the previous screen but the cannot go forward again without getting the above error.

To combat this I have tried using the code below, but it does not work. Can anyone help me out?

var loginView = Ext.getCmp('login');
    if(!loginView){
       Ext.getCmp('loginTest2').destroy(); 
      loginView = Ext.create('com.view.Login');
  }

  Ext.Viewport.setActiveItem('login');

I also tried:

if(Ext.getCmp('login')){
     Ext.Viewport.setActiveItem('Login');
  }else{

    Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
  }

Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.

Upvotes: 0

Views: 1169

Answers (2)

Deepanshu Shukla
Deepanshu Shukla

Reputation: 133

To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`

Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();

above it just destroying a list to whom i gave action not id you can give itemId instead of action in this .. hope you will enjoy this

Upvotes: 1

Tejas
Tejas

Reputation: 928

we can simply use following line to navigate from one panel to another..

Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });

here, xtype is that we can define for the panel we want to display, like this...,

Ext.define('BeLocal.view.LeftCurveList', {
       extend: 'Ext.Panel',

       **xtype: 'cat',**

       config: {

       items: [
               {
               xtype: 'toolbar',
               docked: 'top',
               width: '100%',
               padding:0,
               title: 'BeLocal Places',
               items:[{
                      xtype: 'button',
                      ui: 'back',
                      text: 'Back',
                      ]
               },

            ]
       }
       });

Upvotes: 3

Related Questions