如何根據htm事件在Sencha Touch中切換視圖？

我想根據html事件切換視圖：通常是在一個映射圖像上點擊一下。我去了post。它解釋瞭如何通過在html元素上添加偵聽器來獲取href值。我已成功執行此步驟。如何根據htm事件在Sencha Touch中切換視圖？

下一步是切換到正確的視圖。通常，如果href =「item1」，那麼我想切換到查看「item1」...我真的不知道如何執行此操作。

在我看來，對HTML元素代碼：

<img class="map" src="folder/name_pic.jpg" ...usemap='#MapName' /> 
    <map name='#MapName' ...> 
     <area shape=...... href="view1" /> 
     <area shape=...... href="view2" /> 
     <area shape=...... href="view3" /> 
    </map>

碼父Tab平板：

panel.getEl().on({ 
    tap: function(e){ 

     var href = Ext.fly(e.getTarget(
        'img.map')).getAttribute('href'); 

     // What goes HERE? 
     // if (href == 'view1') 
     //  display 'view1'... 
}, 
delegate: 'img.map' 
});

來源

2012-11-30 Lauraire Jérémy

我已經在控制器中使用「路線」解決方案成功實現了我的目標。

首先，我定義我的映射圖如下：

<img class="map" src="folder/name_pic.jpg" ...usemap='#MapName' /> 
    <map name='#MapName' ...> 
     <area shape=...... href="/#view1" /> 
     <area shape=...... href="/#view2" /> 
     <area shape=...... href="/#view3" /> 
    </map>

，然後在Controller.js：

config: { 
    routes: { 
     'view1': 'showView1', 
     'view2': 'showView2', 
     'view3': 'showView3' 
    }, 
[...... code here...] 

showView1: function() { 

    this.getMainPanel().add({ 
     xtype: 'view1' 
    }); 
}, 
showView2: function() { 

    this.getMainPanel().add({ 
     xtype: 'view2' 
    }); 
},

這工作，但似乎不是最佳的我。我會繼續努力的！

來源

2012-12-13 22:24:11

您可以使用如下所示的樣本代碼做到這一點，你可能需要修改它爲您的應用設計，但這是一般的方式

Tapped: function() { 
     // When the user taps on this item, create a new reference new viw, 
     // and set it as the active item 

     Ext.Viewport.setActiveItem(Ext.create('Your new view Goes here')); 
    }

謝謝

來源

2012-11-30 11:48:31 Oxi

謝謝，但如何使圖片的哪部分被挖掘的區別？我想在控制器中使用「路線」解決方案。 –

如何根據htm事件在Sencha Touch中切換視圖？

回答

相關問題