Home > DeveloperSection > Forums > Change view native app Sencha Touch
Mark Devid
Mark Devid

Total Post:101

Points:707
Posted on    June-03-2013 2:44 AM

 Sencha Touch Sencha Touch 
Ratings:


 1 Reply(s)
 943  View(s)
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. 



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-03-2013 9:11 AM

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.

Don't want to miss updates? Please click the below button!

Follow MindStick