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'

                    }

                ]

            }

        ]

    }



});