1. #1
    Sencha User
    Join Date
    Jan 2011
    Location
    Portugal
    Posts
    4
    Vote Rating
    0
    CrazyMenConnected is on a distinguished road

      0  

    Default Unanswered: Problem with overlapping panels in Ext.tab.Panel!

    Unanswered: Problem with overlapping panels in Ext.tab.Panel!


    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)
    Code:
    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)
    Code:
    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:
    Code:
    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

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Location
    Portugal
    Posts
    4
    Vote Rating
    0
    CrazyMenConnected is on a distinguished road

      0  

    Default


    Anyone please...

    I'm still stuck on this!
    CrazyMenConnected

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi