title: panel overlapping  while loading them dynamically sencha
body: <p>I have several tabs on toolbar each of them having seperate handler , i have called seperate function of each handler . The code is as below</p>
  
  <pre><code>Ext.define('myco.view.User', {
      extend: 'Ext.Container',
      config: {
          scrollable: true,
          items: [{
                  xtype: 'panel',
                  id: 'User'
              },
  
              {
              docked: 'top',
              xtype: 'toolbar',
              items: [{
                  text: 'My Profile',
                  handler: function() {
                      var panel = Ext.getCmp('User'),
                          tpl = new Ext.XTemplate([
                          '&lt;div class="demo-weather"&gt;',
                              '&lt;tpl for="."&gt;',
                                  '&lt;div class="day"&gt;',
                                      '&lt;div class="date"&gt;{username}&lt;/div&gt;',
                                      '&lt;tpl for="weatherIconUrl"&gt;',
                                          '&lt;img src="{value}"&gt;',
                                      '&lt;/tpl&gt;',
                                      '&lt;span class="temp"&gt;{tempMaxF}&amp;deg;&lt;span class="temp_low"&gt;{tempMinF}&amp;deg;&lt;/span&gt;&lt;/span&gt;',
                                  '&lt;/div&gt;',
                              '&lt;/tpl&gt;',
                          '&lt;/div&gt;'
                      ]);
  
                      panel.getParent().setMasked({
                          xtype: 'loadmask',
                          message: 'Loading...'
                      });
  
                      Ext.Ajax.request({
                          url: 'http://localhost:8000/api/myapp/user/',
                          method:'GET',
                          callbackKey: 'callback',
                          defaultHeaders : 'application/json',
                          params: {
                              //key: '23f6a0ab24185952101705',
                              //q: '94301', // Palo Alto
                              format: 'json',
                              //num_of_days: 5
                          },
                          success : function(response, opt) {
                                      dataarray = Ext.decode(response.responseText);
                                      weather=dataarray.objects;
                                      panel.updateHtml(tpl.applyTemplate(weather))
                                      panel.getParent().unmask();
                                      },
                          failure : function(response, opt) {
                                       Ext.Msg.alert('Failed', response.responseText);
                                       panel.getParent().unmask();
                                      }       
  
  
                      });
                  }
              },
              {
                   text:'login',
                   handler: function() {
                       var main = new Ext.Panel({  
                                     title: 'My first panel', //panel's title  
                                     fullscreen: true,
                                     //the element where the panel is going to be inserted 
                                     //html: 'Nothing important just dummy text' //panel's content  
                                     items:[
                          {
                              xtype: 'fieldset',
                              title: 'Login',
                              items: [
                                  {
                                      xtype: 'textfield',
                                      label: 'Username',
                                      name:   'username',
                                      id  :  'username'
                                  },
                                  {
                                      xtype: 'passwordfield',
                                      label: 'Password',
                                      name:  'password',
                                      id   :  'password'
                                  }
                              ]
                          },
                          {
                              xtype: 'button',
                              text: 'Send',
                              ui: 'confirm',
  
                              handler: function() {}
  
                          }
                      ]
                                     });  
                   panel.add(main);
                   alert('test');
                   }
              }
              ]
          }]
      }
  });
  </code></pre>
  
  <p>Now when i click on the tab , previous panel will not be cleared and data will get overlapped there ..... like when i click My profile profile is listed there , after that when i click login  profile+ login both will be loaded one overlapping another ...</p>