0

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

我通过了这篇文章。它解释了如何通过在 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'
});
4

2 回答 2

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

谢谢

于 2012-11-30T11:48:31.333 回答
1

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

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

<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-13T22:24:11.497 回答