Sencha Touch 2 : Comment utiliser un bouton sur la page d'accueil pour naviguer vers d'autres vues ?

Question

Si vous deviez aller plus loin que la vidéo "Getting Started with Sencha Touch 2" et ajouter des boutons de navigation sur la page d'accueil pour vous permettre d'accéder aux pages Blog et Contact, comment feriez-vous ? J'ai tout mis en place comme le fil de discussion Sencha Touch 2 MVC - comment changer de vue avec un bouton

Le problème que je rencontre est que si je crée un bouton pour aller à la page Blog dans la page Home.js, le bouton fonctionnera mais la liste imbriquée sur la page Blog.js ne fonctionne plus et la barre de titre de Main.js n'apparaît plus sur Blog.js non plus. Le code de mon contrôleur ressemble à ceci

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

Où showPost est la même fonction que la vidéo GS. Mon bouton dans le fichier Home.js ressemble à ceci

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

Tout le reste est exactement comme la vidéo de la GS. Je veux que le bouton de la page Home.js fonctionne exactement comme les boutons de la barre de titre dans Main.js de la vidéo de démarrage. Que me manque-t-il ? Merci d'avance.

13/04/12 Mise à jour : tous les fichiers js. Ils sont tous essentiellement le code original de la vidéo GS.

vue/Main.js

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

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

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

vue/Home.js

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

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

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

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

contrôleur/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

Comme l'utilisation de Ext.Viewport.setActiveItem({xtype : 'blog'}) ne réutilise pas les xypes que vous avez créés, il y a confusion lorsqu'on essaie d'utiliser la liste de blogs. J'utilise une partie de ce qui suit Roberto a dit et un peu de mon propre code pour que la fonction "button[go]" du contrôleur ressemble à ceci :

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

Cela a permis de créer le type de texte la première fois, puis de le réutiliser à chaque fois, de sorte que la navigation dans la liste annexée fonctionne aussi bien que la navigation sur la page d'accueil.

Answer 2

Vous pouvez facilement passer d'une vue à l'autre en appuyant sur un bouton si vous utilisez la navigationView.

• prenez votre vue principale comme navigationView .
• Placez le bouton dans la fenêtre de navigation.

• écrivez le code suivant dans le tap-listener de votre bouton

  this.up('your navigationView xtype').push({
            xtype : 'xtype de la vue à laquelle vous voulez aller en appuyant sur le bouton'.
  }) ;

Answer 3

2 étapes que vous devez suivre

1. en vue

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

Notez l'action du bouton

2.in Contrôleur

spécifiez d'abord le type de vue particulier en tant que référence dans ce contrôleur.

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