Change view native app Sencha Touch

0
votes

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?

2
javascriptandroidmodel-view-controllersencha-touch

2 Answers

0
votes

Try this for your button code : 

{
    xtype : 'button'
    id : 'mybutton',
    text : 'V1',
    listeners : {
        tap : function(){
            alert("tapped button");
        }
    }
}

or if you want the function to be called from inside your controller (which is always preferable), then your button code becomes :: 

{
    xtype : 'button'
    id : 'mybutton',
    text : 'V1'
}

and inside your controller you get the following 

config : {
    refs : {
        mybutton1 : 'panelID button[text="V1"]'
    },
    control : {
        mybutton1 : {
            tap : 'tappedButtonFunction
        }
    }
},

tappedButtonFunction : function(){
    alert("tapped this button");
    // Do something
}

Also, try your code without using the overrides. It should work. I haven't seen it done before, where you override your own code instead of just simply coding.

0
votes

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.