Problem with overlapping panels in Ext.tab.Panel!

[CrazyMenConnected]

Hi, hello all!

I am having a few problems with Ext.tab.Panel, and i just cant figure out why.
In the code below what i am trying to do is to a tabPanel with the user names (buttons) filled from the usersStore (and that is working fine), and when one of those buttons is pressed it turns on the login panel so that the user can enter his/hers pin number.

I dont know why but when the component is shown both panels are overlapped. I can get the first view to be hidden, or disabled, but when i try to turn it on after pressed the users button, it gets overlapped again, and no animation is show.

I probably am doing some stupid mistake in my code, but i have been at this for hours and i cant seem to understand what i am doing wrong,

The login panel/view in app/views/Login.js: (it basicly draws a numbers from 0..9 an OK, and Cancel button in a grid layout)

Ext.define('isabel.view.Login', {  extend: 'Ext.Panel',
  xtype: 'login',
  config: 


  {
    title: 'login',
    iconCls: 'lock_closed',
    styleHtmlContent: true,
    height: '100%',


    items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Isabel v0.1 - Autenticação'
    },
    {
      xtype: 'panel',
      height: '100%',
      width: '100%',
      items: [
      {                      
        xtype: 'panel',
        height: '25%',
        width: '100%',
        flex: 1,
        layout: 'hbox',
        items: [
        {
          xtype: 'panel',
          height: '100%',
          flex: 1,
          layout: {
            type : 'hbox',
            align: 'stretch',
            pack : 'center'
          },


          items: [
          {
            xtype: 'button',
            text: '1',
            flex: 1,
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: '2',
            flex: 1,
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: '3',
            flex: 1,
            margin : '3px',
            padding: '2px'
          }]
        }]
      },
      {
        xtype: 'panel',
        height: '25%',
        width: '100%',
        flex: 1,
        layout: 'hbox',
        items: [
        {
          xtype: 'panel',
          height: '100%',
          flex: 1,
          layout: {
            type : 'hbox',
            align: 'stretch',
            pack : 'center'
          },


          items: [
          {
            xtype: 'button',
            text: '4',
            flex: 1,
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: '5',
            flex: 1,
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: '6',
            flex: 1,
            margin : '3px',
            padding: '2px'
          }]
        }]
      },
      {
        xtype: 'panel',
        height: '25%',
        width: '100%',
        flex: 1,
        layout: 'hbox',
        items: [
        {
          xtype: 'panel',
          height: '100%',
          flex: 1,
          layout: {
            type : 'hbox',
            align: 'stretch',
            pack : 'center'
          },


          items: [
          {
            xtype: 'button',
            text: '7',
            flex: 1,
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: '8',
            flex: 1,
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: '9',
            flex: 1,
            margin : '3px',
            padding: '2px'
          }]
        }]
      },
      {
        xtype: 'panel',
        height: '25%',
        width: '100%',
        flex: 1,
        layout: 'hbox',
        items: [
        {
          xtype: 'panel',
          height: '100%',
          flex: 1,
          layout: {
            type : 'hbox',
            align: 'stretch',
            pack : 'center'
          },


          items: [
          {
            xtype: 'button',
            text: 'C',
            flex: 1,
            ui: 'decline',
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: '0',
            flex: 1,
            margin : '3px',
            padding: '2px'
          },
          {
            xtype: 'button',
            text: 'Ok',
            flex: 1,
            ui: 'confirm',
            margin : '3px',
            padding: '2px'
          }]
        }]
      }]
    }]
  }
});

The users panel/view in app/views/User.js: (This pannel gets filled with buttons representing the users on the database)

Ext.define('isabel.userButton', {  extend: 'Ext.Button',
  xtype: 'userButton',
  
  config:
  {
    userID: -1,
    
    getUserID: function() {
      return this._userID;
    }
  }
});


Ext.define('isabel.view.User', {
  extend: 'Ext.Panel',
  xtype: 'user',
  config:
  {
    title: 'Utilizadores',
    id: 'usersView',
    iconCls: 'team',
    styleHtmlContent: true,
    height: '100%',


    items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Isabel v0.1 - Utilizadores',
      items: [
      {
        xtype: 'clock'
      }]
    }],
    
    listeners: {
      painted: function(user, eOpts) {
        this.refreshUsers();
      },
      initialize: function(user, eOpts) {
        this.refreshUsers();
      }
    }
  },
  
  getUsers: function() {
    var me = this;
    var sto = Ext.getStore('usersStore');
    sto.load();
    sto.each(function(rec) {
      var button = Ext.create('isabel.userButton', {
        text: rec.get('name'),
        userID: rec.get('usr_id'),
        width: 250,
        height: 30,
        ui: 'action',
        listeners : {
          tap: function(userButton, e, eOpts ) {
            var views=Ext.ComponentQuery.query('#mainView login');
            for (var i=0; i<views.length; i++) {
              views[i].setDisabled=false;
            };
            
            views=Ext.ComponentQuery.query('#mainView');
            for (i=0; i<views.length; i++) { 
              views[i].setActiveItem(1);
            };
          }
        }
      });
      me.add(button);
    });
  },
  
  cleanUsers: function() {
    var userButtons=Ext.ComponentQuery.query('#usersView userButton');
    for (var i=0; i<userButtons.length; i++) { 
      console.log('item');
      userButtons[i].destroy();
    };
  },
  
  refreshUsers: function() {
    this.cleanUsers();
    this.getUsers();
  }
});

The main view in app/views/Main.js:

Ext.define('isabel.view.Main', {  extend: 'Ext.tab.Panel',
  xtype: 'main',
  requires: [
  'Ext.TitleBar'
  ],
  config: {
    tabBarPosition: 'bottom',
    activeItem: 2,
    id: 'mainView',
    
    items: [
    {
      xtype: 'login'
    },
    {
      xtype: 'user'
    }]
  }
});

Could someone help me out on this one?
Thank you in advance...

[CrazyMenConnected]

Anyone please...

I'm still stuck on this!