1

あらゆる種類のコード スニペットと説明を検索して 2 日間試した後、ここで助けを求める必要があります。

デモ: http://kachipun.se/sandbox/touch/

問題: アプリのランディング ページに、同じ画像の 8 つのインスタンスがあります (後でボタンとしてドレスアップする予定です)。これらの個々の画像を、左側のメニューにリストアップした 8 つの異なるビューにリンクしたいと考えています。

私が理解しているように、setActiveItem() を使用する必要がありますが、動作させることができません;/

リソース: この特定のプロジェクトでは、wozznik の Slider Menu をメニューのベースとして使用し、その上に構築しています。

さまざまなビューのデータを含むストアが含まれています。

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

皆さんがこれを理解するのを手伝ってくれることを本当に願っています!

よろしくお願いします

4

1 に答える 1

0 
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"));
              }      
        }
于 2012-05-23T17:11:52.113 に答える