CHANGE VIEW NATIVE APP SENCHA TOUCH

Mark Devid

Total Post:102

Points:714
Posted by  Mark Devid
 1266  View(s)
Ratings:
Rate this:
Hi Expert,

I created a very simple app to test a native Android app with Sencha Touch. I have two panels. When a button is tapped in the first panel, the second panel must open. In my browser it works great, but when I create a native Android application, only the initial view is displayed. When I tap the button the second view is not displayed.

This is my code:

Ext.application({
views: [
    'MyPanel',
    'MyPanel1'
],
controllers: [
    'MyController1'
],
name: 'MyApp',

launch: function() {

    Ext.create('MyApp.view.MyPanel', {fullscreen: true});
} });

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
alias: 'widget.mypanel',

config: {
    items: [
        {
            xtype: 'button',
            itemId: 'mybutton',
            text: 'V1'
        }
    ],
    listeners: [
        {
            fn: 'onMybuttonTap',
            event: 'tap',
            delegate: '#mybutton'
        }
    ]
},

onMybuttonTap: function(button, e, eOpts) {
    this.fireEvent('getPan1');
}
});


Ext.define('MyApp.view.MyPanel1', {
extend: 'Ext.Panel',
alias: 'widget.mypanel1',

config: {
    items: [
        {
            xtype: 'button',
            itemId: 'mybutton1',
            text: 'V2'
        }
    ],
    listeners: [
        {
            fn: 'onMybutton1Tap',
            event: 'tap',
            delegate: '#mybutton1'
        }
    ]
},

onMybutton1Tap: function(button, e, eOpts) {
    this.fireEvent('getPan');
}

});

Ext.define('MyApp.controller.override.MyController1', {
override: 'MyApp.controller.MyController1',

config: {
    refs: {
        myView: 'mypanel',
        myView2: 'mypanel1'
    },
    control: {
        myView: {
            getPan1: 'getPan1'
        },
        myView2: {
            getPan: 'getPan'
        }
    }
},

getPan1: function(){
    var a = Ext.create('MyApp.view.MyPanel1', {fullscreen: true});
    a.show();
},

getPan: function(){
    var a = Ext.create('MyApp.view.MyPanel', {fullscreen: true});
    a.show();
}
});

It seems to me that in the native app the event is not captured in the controller. What am I doing wrong?
Please help!
Thanks in advance. 

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Change view native app Sencha Touch

    Hi Mark,


    Update your line of code from the following

    The app.js

    Ext.application({
    views: [
        'MyPanel',
        'MyPanel1'
    ],
    controllers: [
        'MyController1'
    ],
    name: 'MyApp',

    launch: function() {
        console.log("appstart");
        Ext.create('MyApp.view.MyPanel', {fullscreen: true});
    }

    });

    app/controller/MyController1.js:

    Ext.define('MyApp.controller.override.MyController1', {
    override: 'MyApp.controller.MyController1',
    config : {
        refs : {
            mybutton : 'mypanel button[text="V1"]'
        },
        control : {
            mybutton : {
                tap : 'tappedButtonFunction'
            }
        }
    },

    tappedButtonFunction : function(){
            console.log("Tapped");
            Ext.Msg.alert("Test");
            // Do something
        }
    });

    app/view/MyPanel.js

    Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',

    requires: [
        'Ext.MessageBox'
    ],

    config: {
        id: 'PanelID',
        items: [
            {
                xtype: 'button',
                id: 'mybutton',
                text: 'V1'
            }
        ]
    }

    });

    But the controller catched not the event in the native app.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!