Sencha Touch 2.0 and navigation.View - MVC

Question

I would like to switch views with a button, there is absolutely no examples of it in a MVC context in the sencha documentation although they recommend developers to use their build in MVC architecture. I guess its because Touch 2.0 is rather new.

http://docs.sencha.com/touch/2-0/#!/api

The video about the list component is also about navigation.View, but since the list component is used, they dont show how to switch views with a button.

Video: Intro to List Component

This is the code i have so far:

uddannelser.js (First view)

Ext.define("VUCFyn.view.uddannelser", {
extend: "Ext.navigation.View",
xtype: "uddannelser",
requires: [
    "VUCFyn.view.avu"
],

config: {
    title: "Uddannelser",
    cls: "uddannelser",
    items: [
        {
            title: "Uddannelser",
            xtype: "container",
            margin: 20,
            layout: "vbox",
            items: [
                {
                    xtype: "button",
                    text: "AVU",
                    width: 100
                }
            ]
        }
    ]
}});

avu.js (subview of uddannelser)

Ext.define("VUCFyn.view.avu", {
extend: "Ext.Panel",
xtype: "avu",

config: {
    title: "AVU",
    cls: "avu",
    scrollable: true,
    items: [
        {
            xtype: "label",
            html: [
                "<p>Almen Voksenuddannelse - avu - er et tilbud om uddannelse til alle over 18 år. Du kan tage avu-fagene et ad gangen eller i en kombination med flere fag. Du kan også kombinere avu-fagene med andre enkeltfag på FVU og/eller hf.</p>",
                "<h5>AVU omfatter kernefagene:</h5>",
            ].join("")
        }
    ]
}});

Main.js (controller)

Ext.define('VUCFyn.controller.Main', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        uddannelser: "uddannelser"
    },
    control: {
        "uddannelser": {
            tap: "showDetail"
        }
    }
},

showDetail: function () {
    this.getUddannelser().push({
        xtype: "avu"
    });
},

init: function () {

}});

Please, if someone could show me how to do it, based on the above code (or similar) that would be great.

btw: the answers in this thread: Sencha Touch 2 MVC - how to switch views with button is not working for me. (No errors though) I think its for Sencha Touch 1.1, and a lot of things have apparently changed in 2.0

Check out this simple NavigationView example from Sencha Docs .. http://docs.sencha.com/touch/2-0/#!/guide/navigation_view (though not in MVC format, this is what you might want) — Saurabh Gokhale, Apr 27 '12 at 10:16

score 0 · Answer 1 · answered Feb 18 '13 at 16:28

Hi I think you just need to fix the controller and it will work, try the following and let me know how you get on.

config: {
refs: {
    uddannelser: "uddannelser",
    uddannelserButton: "uddanelser button"
},
control: {
    "uddannelserButton": {
        tap: "showDetail"
    }
}

},

So all I have done is add a selector for the button in your uddanelser view and attached the click listener to that. Good luck!

score 0 · Answer 2 · answered Oct 26 '14 at 22:55

Are you trying to listen for tap events on the navigationview you've given the uddannelser cls? There's a couple of issues with your setup;

Firstly, it doesn't look like you are using component queries properly in your controller, check this documentation: http://docs.sencha.com/touch/2.4/apidocs/#!/api/Ext.ComponentQuery

Depending on how many of these components in the view you want the controller to manage, you can either give it an id and search for the component by "#id" or you can use the xtype and a config option, such as "navigationview[cls=uddannelser]".

Secondly, you can't listen for tap events on a navigationview, if you wanted to listen for tap events on this component you'd have to listen for the tap event on the element and relay the event. I suspect you are actually trying to listen for the tap event on the button though, in that case create two refs in your controller, one for the navigationview and one for the button, listen for the tap event on the button and push the panel on the navigationview like you are now.

Sencha Touch 2.0 and navigation.View - MVC

2 Answers2

Linked