面板重疊，同時動態加載它們sencha

Question

我在工具欄上有幾個選項卡，每個選項卡都有獨立的處理程序，我稱每個處理程序都有獨立的功能。代碼如下

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([ 
         '<div class="demo-weather">', 
          '<tpl for=".">', 
           '<div class="day">', 
            '<div class="date">{username}</div>', 
            '<tpl for="weatherIconUrl">', 
             '<img src="{value}">', 
            '</tpl>', 
            '<span class="temp">{tempMaxF}&deg;<span class="temp_low">{tempMinF}&deg;</span></span>', 
           '</div>', 
          '</tpl>', 
         '</div>' 
        ]); 

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

現在，當我在選項卡上單擊，以前的面板將不會被清零，數據會得到重疊有.....就像當我點擊我的資料分佈列在那裏，在那之後當我點擊登錄配置文件+登錄都將被加載一個重疊另一個...

Answer 1

你應該使用Ext.tab.Panel爲此，定義您的配置文件和登錄面板作爲父項TabPanel的項目，交換將由ExtJS處理。您可以使用面板的激活事件來添加自定義邏輯，以在選項卡激活時執行。