Question

我想根据html事件切换视图：通常点击映射图像。

我走了这个post。它解释了如何通过在html元素上添加一个监听器来获取href值。我已经成功地完成了这一步。

下一步是切换到正确的视图。通常，如果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>

父标签面板中的代码：

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'
});

Answer 1

您可以使用下面显示的示例代码执行此操作，您可能需要针对您的应用程序设计对其进行修改，但这是一般方法

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'));
    }

由于

Answer 2

我在控制器中使用“路线”解决方案成功实现了我的目标。

首先我将我的映射图片定义如下：

<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'
    });
},

虽然有效但对我来说似乎不是最佳选择。我会继续努力！

如何根据htm事件在Sencha Touch中切换视图？

2 个答案: