Geek asks and answers

Sencha Touch 2: How do you use the button on the main page to go to other views?

If you are planning to take the “Getting Started with Sencha Touch 2” video one step further and add a navigation button on the main page so that you can go to the blog and contact pages, how would you do it? I installed everything as a Sencha Touch 2 MVC thread - how to switch views using a button

The problem I am facing is that if I create a button to go to the Blog page on the Home.js page, the button will work, but then the nested list on the Blog.js page no longer works, and the TitleBar from Main.js is no longer displayed on Blog.js. My controller code is as follows:

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

showPost - , GS. Home.js :

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

GS. , Home.js , TitleBar, Main.js Getting Started. ? .

4/13/12 : js. GS.

/Main.js

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

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

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

/Home.js

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

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

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

/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'
                        }
                    }
                }
            }]
    }
})

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

Ext.Viewport.setActiveItem({xtype: 'blog'}) xtypes, . , [go] ', :

'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])
    }
}

xtype , , ,

+1

, navigationView.

  • .
  • .

  • tap-listenener

    this.up('your navigationView xtype'). push ({
                         xtype:  });

0

2 steps you must 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
         },

Pay attention to the action of the button

2.in controller

first specify the specific type of xtype as ref in this 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);
         },
0
source

More articles:


All Articles