Question

I would like to switch views according to a html events : typically a tap on a mapped image.

I went trough this post. It explains how to get the href value by adding a listener on the html element. I have succesfully performed this step.

Next step is to switch to the correct view. Typically, if href = “item1” then I want to switch to view “item1″… I do not really get how to perform this.

Code for html element in my view :

<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>

Code in the parent Tab panel :

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

I have successfully achieved my goal using “routes” solution in a controller.

First I define my mapped picture as follow :

<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>

And then in a 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'
    });
},

That works but does not seem optimal for me. I’ll keep working on that!