Question

If you were going to take the “Getting Started with Sencha Touch 2” video one step further and add button navigation on the home page to allow you to go to the Blog and Contact pages how would you do it? I have set it all up like the thread Sencha Touch 2 MVC – how to switch views with button

The problem that I am running into is that if I create a button to go to the Blog page in the Home.js page the button will work but then the nested list on the Blog.js page does not work anymore and the TitleBar from Main.js does not appear on Blog.js anymore either. My controller code looks like this

control: {
    'blog list': {
        itemtap: 'showPost'
    },
    'button[go]':{
        tap: function(){
            Ext.Viewport.setActiveItem({
                xtype: 'blog'
            })
        }
    }
}

Where showPost is the same function as the GS video. My button on the Home.js file looks like this

items:[
    {
        xtype: 'button',
        text: 'text',
        go: 'buttonPage'
    }]
}

Everything else is exactly like the GS video. I want the button on the Home.js page to act exactly like the buttons on the TitleBar work in Main.js from the Getting Started video. What am I missing? Thanks in advance.

4/13/12 Update: all the js files. They are all essentially the original GS video code.

view/Main.js

Ext.define("GS.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: ['Ext.TitleBar'],

    config: {
        xtype: 'bottombar',
        tabBarPosition: 'bottom',

        items:[{xtype: 'homepanel'},
            {xtype: 'blog'}]}
});

view/Home.js

Ext.define('GS.view.Home', {
    extend: 'Ext.Panel',
    xtype: 'homepanel',

    config:  {
        title: 'Home',
        iconCls: 'home',

        items:[{
                xtype: 'button',
                text: 'text',
                go: 'buttonPage'}]
        }
})

view/Blog.js

Ext.define('GS.view.Blog',{
    extend: 'Ext.navigation.View',
    xtype: 'blog',
    requires: ['Ext.dataview.List', 'Ext.data.proxy.JsonP', 'Ext.data.Store'],
    config: {
        title: 'Blog',
        iconCls: 'star',
        items: [{
                xtype: 'list',
                itemTpl: '{title}',
                title: 'Recent Posts',
                store:{
                    autoLoad: true,
                    fields: ['title', 'author', 'content'],
                    proxy: {
                        type: 'jsonp',
                        url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://data.9msn.com.au/Services/Service.axd/feeds/rss/news/headlines',
                        reader: {
                            type: 'json',
                            rootProperty: 'responseData.feed.entries'
                        }
                    }
                }
            }]
    }
})

controller/Main.js

Ext.define('GS.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            blog: 'blog'
        },
        control: {
            'blog list': {
                itemtap: 'showPost'
            },
            'button[go]':{
                tap: function(){
                    Ext.Viewport.setActiveItem({
                        xtype: 'blog'
                    })
                }
            }
        }
    },

    showPost: function(list, index, element, record){
        this.getBlog().push({
            xtype: 'panel',
            title: record.get('title'),
            html: record.get('content'),
            scrollable: true,
            styleHtmlContent: true,
        })
    }

});

app.js

Ext.application({
    name: 'GS',
    requires: ['Ext.MessageBox'],
    controllers: ['Main'],
    views: ['Main', 'Home', 'Blog'],
    launch: function() {
        Ext.Viewport.add(Ext.create('GS.view.Main'));
    },
});

Answer 1

Since using Ext.Viewport.setActiveItem({xtype: ‘blog’}) doesn’t reuse the xtypes that you have created it gets confused when trying to use the blog list. I use some of what Roberto said and a little bit of my own code to end up with the controller ‘button[go]’ function looking like this:

'button[go]':{
    tap: function(btn){
        if(Ext.ComponentQuery.query(btn.go) == '')
        {   
            Ext.Viewport.setActiveItem({
                xtype: btn.go
            })
        }
        else                    
            target = Ext.ComponentQuery.query(btn.go);
            Ext.Viewport.setActiveItem(target[0])
    }
}

And that created the xtype the first time and then reused it every subsequent time so the navigation in the nexted list worked as well as the navigation on the homepage