Linking Images to different views in Sencha Touch 2 - sencha-touch

Question

After 2 days of searching and trying all sorts of code snippets and explanations, i need to ask for some help here!
Demo:
http://kachipun.se/sandbox/touch/
Problem:
On the landing page of the app i have 8 instances of the same image (Planning to dress them up as buttons later on). I want to link these individual images to the 8 different views i have listed up in a menu up to the left.
As i've understood it, i need to use setActiveItem(), but however i try i cant get it to work ;/
Resources:
For this particular project i've used wozznik's Slider Menu as a base for the menu, and im building on that.
It contains a store with the data of the different views.
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'},
]
}
});
And on the landing view (Start.js) i have the images setup like this with listeners listening for taps on the different images (check console log):
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!');
}
}
I really hope that you guys can help me make sense of this!
Best Regards

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