sencha touch mvc

 

controller:

Ext.define('MyApp2.controller.MyController1', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            "#image2": {
                tap: 'onImageTap'
            }
        }
    },

    onImageTap: function(image, e, eOpts) {
        console.log('img2 tap');
    }

});

 

view:

Ext.define('MyApp2.view.MainView', {
    extend: 'Ext.carousel.Carousel',
    alias: 'widget.mainview',

    requires: [
        'Ext.Panel',
        'Ext.Label',
        'Ext.Img'
    ],

    config: {
        itemId: 'mainView',
        items: [
            {
                xtype: 'panel',
                itemId: 'panel1',
                items: [
                    {
                        xtype: 'label',
                        centered: true,
                        html: 'Panel 1',
                        itemId: 'label1'
                    },
                    {
                        xtype: 'image',
                        height: 201,
                        id: 'image1',
                        itemId: 'image1',
                        src: 'images/sencha.png'
                    }
                ]
            },
            {
                xtype: 'panel',
                itemId: 'panel2',
                items: [
                    {
                        xtype: 'label',
                        centered: true,
                        html: 'Panel 2',
                        itemId: 'label2'
                    },
                    {
                        xtype: 'image',
                        height: 201,
                        id: 'image2',//reference this id to attach event handler
                        itemId: 'image2',
                        src: 'images/sencha.png'
                    }
                ]
            },
            {
                xtype: 'panel',
                itemId: 'panel3',
                items: [
                    {
                        xtype: 'label',
                        centered: true,
                        html: 'Panel 3',
                        itemId: 'label3'
                    },
                    {
                        xtype: 'image',
                        height: 201,
                        itemId: 'image3',
                        src: 'images/sencha.png'
                    }
                ]
            },
            {
                xtype: 'panel',
                itemId: 'panel4',
                items: [
                    {
                        xtype: 'label',
                        centered: true,
                        html: 'Panel 4',
                        itemId: 'label4'
                    },
                    {
                        xtype: 'image',
                        height: 201,
                        itemId: 'image4',
                        src: 'images/sencha.png'
                    }
                ]
            }
        ]
    }

});