Question

经过2天的搜索和尝试各种代码片段和解释后，我需要在这里寻求帮助！

演示： http://kachipun.se/sandbox/touch/

问题： 在应用程序的登录页面上，我有8个相同图像的实例（计划稍后将它们打扮成按钮）。我想将这些单独的图像链接到我在左侧菜单中列出的8种不同视图。

正如我所理解的那样，我需要使用setActiveItem（），但是我试着让它无法运行; /

资源： 对于这个特殊的项目，我使用了wozznik的滑块菜单作为菜单的基础，并在此基础上构建。

它包含一个包含不同视图数据的商店。

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

在着陆视图（Start.js）上我设置了这样的图像，监听器监听不同图像上的点击（检查控制台日志）：

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

我真的希望你们能帮助我理解这一点！

最好的问候

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

将图像链接到Sencha Touch 2中的不同视图

1 个答案: