將圖像鏈接到Sencha Touch 2中的不同視圖

Question

經過2天的搜索並嘗試各種代碼片段和解釋，我需要在這裏尋求幫助！

演示： http://kachipun.se/sandbox/touch/

問題： 在應用程序的登陸頁面我有同樣的圖像的8個實例（規劃打扮起來，按鈕以後）。我想將這些單獨的圖像鏈接到我在左側菜單中列出的8種不同視圖。

正如我的理解是，我需要使用setActiveItem（），但但是我嘗試，我不能讓它的工作;/

資源： 對於這個特殊的項目，我已經使用wozznik的滑塊菜單作爲菜單的基礎，並以此爲基礎。

它包含一個存儲不同視圖的數據。

Ext.define('SliderMenu.store.MenuOptions', { extend: 'Ext.data.Store', 

    requires: [, 
    ], 

    config: { 
     model: 'SliderMenu.model.MenuOption', 
     storeId: 'MenuOptionsStore', 

     //Customize your menu options 
     data: [ 
      {id: 1, view: 'SliderMenuDemo.view.Start', iconCls: 'basic', iconMask:true, text:'Start'}, 
      {id: 2, view: 'SliderMenuDemo.view.MC', iconCls: 'basic', iconMask:true, text:'Machining Center'}, 
      {id: 3, view: 'SliderMenuDemo.view.TC', iconCls: 'basic', iconMask:true, text:'Turning Center'}, 
      {id: 4, view: 'SliderMenuDemo.view.ST', iconCls: 'basic', iconMask:true, text:'Silent Tools'}, 
      {id: 5, view: 'SliderMenuDemo.view.HC', iconCls: 'basic', iconMask:true, text:'Heavy Cuts'}, 
      {id: 6, view: 'SliderMenuDemo.view.MT', iconCls: 'basic', iconMask:true, text:'Multi Task'}, 
      {id: 7, view: 'SliderMenuDemo.view.SH', iconCls: 'basic', iconMask:true, text:'Sliding Head'}, 
      {id: 8, view: 'SliderMenuDemo.view.VTL', iconCls: 'basic', iconMask:true, text:'VTL'}, 
      {id: 9, view: 'SliderMenuDemo.view.Web', iconCls: 'basic', iconMask:true, text:'Web'}, 
     ] 
    } 
}); 

而就在登陸視圖（Start.js）我有圖像設置這樣的與聽衆收聽的不同圖像水龍頭（檢查控制檯日誌）：

items: [{    
        html: '<div class="gridwrapper">'+ 
        '<img class="test1 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '<img class="test2 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '<img class="test3 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '<img class="test4 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '<img class="test5 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '<img class="test6 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '<img class="test7 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '<img class="test8 normal" src="http://static.flickr.com/43/102997171_f9263d8797_o.jpg" width="23%" />'+ 
        '</div>', 

       }, 
       { 
       }], 


     listeners: [{   
      element: 'element',   
      delegate: 'img.test1',   
      event: 'tap',   
      fn: function() { 
       console.log('One!'); 
       }  
     },{    
      element: 'element',   
      delegate: 'img.test2',   
      event: 'tap',   
      fn: function() { 
       console.log('Two!'); 
       } 
     } 

我真的希望你們可以幫助我理解這一點！

問候

Answer 1

Please try: 
listeners: [{   
      element: 'element',   
      delegate: 'img.test1',   
      event: 'tap',   
      fn: function() { 
       Ext.getCmp("maincard").changeViewTo(Ext.create("SliderMenuDemo.view.SH")); 
       // alternative: Ext.getCmp("SliderMenu.view.Main").changeViewTo(Ext.create("SliderMenuDemo.view.SH")); 
       }  
     }