sencha hbox面板不顯示

Question

我想創建一個顯示2個面板的hbox。它工作正常，直到我決定將左面板的佈局設置爲「CARD」。 我用代碼是

Ext.define("InfoImage.view.WorkItems", { 
    layout:'hbox', 
    extend:'Ext.Container', 
    requires:[ 
     'Ext.TitleBar', 
     'Ext.layout.HBox', 
     'Ext.List' 
    ], 
    xtype:'workitems', 
    id:'workitems', 
    // layout:'fit', 
    config:{ 
     //scrollable:'true', 
     fullscreen:true, 
     layout:'fit', 
     cls:'hboxpanel', 
     items:[ 
      { 
       xtype:'leftPanel' 
      }, 
      { 
       xtype:'documentPanel' 
      } 
     ] 

    } 

}); 

下面左圖代碼給出：

Ext.define('InfoImage.view.leftPanel', { 
    extend:'Ext.Panel', 
    requires:[ 
     'InfoImage.view.Main', 
     'InfoImage.view.WorkItems', 
     'Ext.TitleBar' 
    ], 

    id:'leftPanel', 
    xtype:'leftPanel', 

    config:{ 
     width:'30%', 
     fullscreen:true, 
     autoScroll:true, 
     layout:'card', 
     cardSwitchAnimation:'slide', 
     cls:'leftPanel', 
     items:[ 
      /*{ 
       xtype:'workItemPanel' 
      }, 
      { 
       xtype:'inboxQueuePanel' 

      },*/ 
      { 
       xtype:'toolbar', 
       docked:'bottom', 
       items:[ 

        { 
         xtype:'button', 
         cls:'workitem', 
         text:"<img src='resources/images/compose.png' style='width:40px;height:40px;' />", 
         iconMask:true, 
         ui:'normal', 
         id:'workitem', 
         handler:function() { 
         } 
        }, 
        { 
         xtype:'button', 
         cls:'inbox', 
         text:"<img src='resources/images/mail.png' style='width:40px;height:40px;' />", 
         iconMask:true, 
         ui:'normal', 
         id:'inbox', 
         handler:function() { 
         } 
        }, 
        { 
         xtype:'button', 
         cls:'filecabinet', 
         text:"<img src='resources/images/cabinet_256.jpg' style='width:40px;height:40px;' />", 
         iconMask:true, 
         ui:'normal', 
         id:'filecabinet', 
         handler:function() { 
         } 
        } 
       ] 
      } 
     ] 
    } 
}); 

我的問題是，當我運行該項目，僅顯示右側面板中。我如何解決leftPanel問題？

Answer 1

我想你要求的是讓左邊的面板在 之間切換三個「卡」標籤之一？這就像Sencha GeoCongress例子（雖然是全屏） 他們在他們的例子目錄中。在app/controller/SplashScreen.js文件中，它們有幾個函數調用setActiveItem（）來設置卡片。你可以做同樣的在你的處理程序：

 
handler:function() { 
    var leftPanel = Ext.getCmp('leftPanel'); // Get the Left Panel's id 
    leftPanel.setActiveItem(Ext.getCmp('workItemPanel')); // get the id of the card and make it active 
} 

這裏的InfoImage.view.LeftPanel

我的工作版本

 
Ext.define('InfoImage.view.LeftPanel', { 
    extend:'Ext.Panel', 
    requires:[ 
     'InfoImage.view.Main', 
     'InfoImage.view.WorkItems', 
     'Ext.TitleBar' 
    ], 

    id:'leftPanel', 
    xtype:'leftPanel', 

    config:{ 
     width:'30%', 
     fullscreen:true, 
     autoScroll:true, 
     layout: { 
      type: 'card', 
      animation: { 
       type: 'slide' 
      } 
     }, 
     cls:'leftPanel', 
     items:[ 

      { 
       xtype:'toolbar', 
       docked: 'bottom', 
       items:[ 

        { 
         xtype:'button', 
         cls:'workitem', 

         html:"1 <img src='resources/images/compose.png' style='width:20px;height:20px;'/>", 
         iconMask:true, 
         ui:'normal', 
         id:'workitem', 
         handler:function() { 
          var leftPanel = Ext.getCmp('leftPanel'); 
          leftPanel.setActiveItem(Ext.getCmp('one')); 
         } 
        }, 
        { 
         xtype:'button', 
         cls:'inbox', 
         text:"2 <img src='resources/images/mail.png' style='width:40px;height:40px;' />", 
         iconMask:true, 
         ui:'normal', 
         id:'inbox', 
         handler:function() { 
          var leftPanel = Ext.getCmp('leftPanel'); 
          leftPanel.setActiveItem(Ext.getCmp('workItemPanel')); 
         } 
        }, 
        { 
         xtype:'button', 
         cls:'filecabinet', 
         text:"3 <img src='resources/images/cabinet_256.jpg' style='width:40px;height:40px;' />", 
         iconMask:true, 
         ui:'normal', 
         id:'filecabinet', 
         handler:function() { 
          var leftPanel = Ext.getCmp('leftPanel'); 
          leftPanel.setActiveItem(Ext.getCmp('inboxQueuePanel')); 
         } 
        } 
       ] 
      }, 
      { 
       xtype: 'panel', 
       id: 'one', 
       html:'one' 
      }, 
      { 
       xtype: 'panel', 
       id: 'workItemPanel', 
       html:'workItemPanel' 
      }, 
      { 
       xtype: 'panel', 

       id: 'inboxQueuePanel', 
       html:'inboxQueuePanel' 
      } 
     ] 
    } 
});