sencha hboxパネルが表示されない

Question

私は2つのパネルを表示するhboxを作成しようとしています。左パネルのレイアウトを「カード」にするまではうまくいきました。 私はそのために使用されるコードは、左のパネルのコードは以下のとおりである

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

あなたは、左のパネルを の3つの「カード」タブの1つに切り替えることをお勧めしますか？これは、Sencha GeoCongressの例（フルスクリーンですが）のように、 のexamplesディレクトリにあります。 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' 
      } 
     ] 
    } 
});