最後のページからホームボタンに戻る方法

Question

Ext.define('MyApp.view.ui.MyPanel', { 
    extend: 'Ext.Panel', 

    config: { 
     fullscreen: true, 

      layout: { 
       type: 'card', 
       animation: { 
        type: 'slide', 


       } 

      }, 
      items: [ 

/************** panel home ***************/ 

      {  
      xtype: 'panel', 
      id:'homePanel',    
      layout: { 
       type: 'card', 
       animation: { 
        type: 'slide'         
       } 
      }, 
      items : [  
        { 
        xtype: 'panel',     
        items : [{ 
        xtype: 'toolbar', 
        items : [ 
        { 
         xtype: 'image', 
         docked: 'left', 
         html: '<div class="applogo"><img src="../images/logo.png"/></div>', 
         ui: 'light' 
        }, 
        { 
         xtype: 'button', 
         docked: 'right', 
         html: '<img src="../images/about_us.png"/>', 
         id: 'BtnInfo', 
         itemId: 'BtnInfo', 
         style: '', 
          handler:function(){       
          Ext.getCmp('homePanel').setActiveItem('aboutusPanel');  
           }           
        }, 


        ] 
        }, 


        { xtype: 'panel', 

         height: 136,  
         items: [{ 
         xtype: 'carousel', 
         id:'HomeCarousel', 
         height: 136, 
         items: [ 
           { 
            title: 'title card 1', 
            html: '<img src="../images/image_5.png"/>'         
           }, 
           { 
            title: 'title card 2', 
            html: '<img src="../images/image_2.png"/>' 
           }, 
           { 
            title: 'title card 3', 
            html: '<img src="../images/image_3.png"/>' 
           }, 
           { 
            title: 'title card 4', 
            html: '<img src="../images/image_4.png"/>' 
           } 
          ] 
        }], 


        }, 
         { 
         xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Locations</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>', 
         id: 'BtnLocationsHome', 
         itemId: 'BtnLocationsHome', 
         text: 'Locations',            
          handler:function(){        
          Ext.getCmp('homePanel').setActiveItem('locationPanel');  
           }           
        }, 




        { 
          xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/services.png" align="left"/></span><span class="list_text">Services</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>', 
         itemId: 'BtnServices', 
         text: 'Services', 
         handler: function() { 
           Ext.getCmp('homePanel').setActiveItem('servicesPanel');  
         } 


        }, 

       { 
         xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/downloads.png" align="left"/></span><span class="list_text">Downloads</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>', 
         id: 'BtnDownloads', 
         itemId: 'BtnDownloads', 
         text: 'Downloads', 

         handler: function() { 
          Ext.getCmp('homePanel').setActiveItem('downloadPanel');  
         } 
        }, 

        { 

         xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/promotions.png" align="left"/></span><span class="list_text">Promotions</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></div></span></div>', 
         id: 'BtnPromotions', 
         itemId: 'BtnPromotions', 
         text: 'Promotions', 
         handler: function() { 
          Ext.getCmp('homePanel').setActiveItem('promotionPanel');   
         } 
        }, 

        { 
         xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/coupons.png" align="left"/></span><span class="list_text">Coupons</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>', 
         itemId: 'BtnCoupons', 
         text: 'Coupons', 
         handler: function() { 
          Ext.getCmp('homePanel').setActiveItem('couponPanel');  
         } 
        } 

        ] 
       } 
       ]}, 

        /* home panel end */ 


/**************** location **********************/ 
     { 
      xtype: 'panel', 
      id:'locationPanel',    
      layout: { 
       type: 'card', 
       animation: { 
        type: 'slide'            
       } 
      }, 
      items : [        
    { 
     xtype: 'panel',  

     items : [  

      { 
       xtype: 'toolbar', 
       docked: 'top', 
       ui: 'light', 
       title: 'Locations', 
       items: [ 
        { 
         xtype: 'button', 
         docked: 'left', 
         html: '<img src="../images/back_arrow.png"/>', 
         id: 'BtnBackLoc', 
         itemId: 'BtnBackLoc', 
         handler: function() {             
          Ext.getCmp('homePanel').setActiveItem(0); 
          //this.getParent().parent.setActiveItem('homePanel')  
          //Ext.getCmp('locationPanel').setActiveItem(0);     
         } 
        }, 
        { 
         xtype: 'button', 
         docked: 'right', 
         html: '<img src="../images/home.png"/>', 
         id: 'LocationBtnHome', 
         handler: function() { 
          Ext.getCmp('homePanel').setActiveItem(0); 
         }      
        } 
       ] 
      }, 
      { 
       xtype: 'panel', 

       items: [ 
        { 
         xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Showrooms</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>', 
         id: 'BtnShowroomLoc', 
         itemId: 'BtnShowroomLoc', 
         handler:function(){ 
         Ext.getCmp('locationPanel').setActiveItem('showroomPanel'); 

         } 
        }, 
        { 
         xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Service Centers</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>', 
         id: 'BtnServiceCenterLoc', 
         itemId: 'BtnServiceCenterLoc', 
         handler:function(){ 
         Ext.getCmp('locationPanel').setActiveItem('servicecenterPanel'); 

         } 


        }, 
        { 
         xtype: 'button', 
         height: 45, 
         html: '<div class="list_item"><span class="list_icon"><img src="../images/locations.png" align="left"/></span><span class="list_text">Driving Schools</span><span class="list_forward"><img src="../images/arrow.png" align="right"/></span></div>', 
         id: 'BtnDriveLoc', 
         itemId: 'BtnDriveLoc', 
         handler:function(){ 
         Ext.getCmp('locationPanel').setActiveItem('drivingschoolPanel'); 

         } 

        } 
       ] 
      } 

    ] 
       } 


       ] 

       }, 
       /* panel location end */ 

Answer 1

バックボタンハンドラでsetActiveItem();機能を使用してください。アクティブなアイテムの機能を設定するには、あなたのホームパネルに言及してください。