Sencha Touch 2: How do you use a button on the homepage to navigate to other views?

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'));
    },
});

please copy & paste all your js files here and I will help you solve this — Thiem Nguyen, Apr 11 '12 at 17:30

score 1 · Accepted Answer · edited May 23 '17 at 12:27

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

score 0 · Answer 2 · answered Apr 27 '12 at 05:36

you can easily switch views by button tap if you are using navigationView.

take your main view as navigationView .
put the button into the navigationView .
write the following code into tap-listener of your button

this.up('your navigationView xtype').push({
xtype: 'xtype of the view at which you wanna go by button tap'
});

score 0 · Answer 3 · answered Apr 03 '13 at 09:21

2 Steps You have to follow

in View

     {
            xtype: "button",
            //text: "Book Bus Ticket",
            ui: 'action',                      
            action:"book" ,   // button Action
         },


        {
             xtype: "button",
             text: "Get Ticket Details",
             ui: 'action',                                  
             action:"getticket" ,  // button Action
         },

Note the Button Action

2.in Controller

first specify the particular view xtype as a ref in that controller

    Ext.define('jetbus.controller.BookticketController', {
   extend: 'Ext.app.Controller',

        refs: {

              'busdetails':"busDetailsList",   // object:xtype

    },

   control: {
    'busdetails button[action=book]': {   // button action
        tap: 'book'
    },

    ' button[action=getticket]': {     // button action
        tap: 'getticket'
    },
    }

     book: function(){
var mn=Ext.create('abc.view.Main'); // Functionname the page you want to redirect
Ext.Viewport.add(mn);
Ext.Viewport.setActiveItem(mn);
         },

Sencha Touch 2: How do you use a button on the homepage to navigate to other views?

3 Answers3