3

如果您打算更进一步地观看“Sencha Touch 2 入门”视频，并在主页上添加按钮导航以允许您转到博客和联系页面，您会怎么做？我已经像线程 Sencha Touch 2 MVC 一样设置了所有内容- 如何使用按钮切换视图

我遇到的问题是，如果我创建一个按钮以转到 Home.js 页面中的博客页面，该按钮将起作用，但是 Blog.js 页面上的嵌套列表不再起作用，并且 Main 中的 TitleBar .js 也不再出现在 Blog.js 上。我的控制器代码如下所示

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 页面上的按钮与入门视频中 Main.js 中 TitleBar 上的按钮完全相同。我错过了什么？提前致谢。

2012 年 4 月 13 日更新：所有 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,
        })
    }

});

应用程序.js

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

3 回答 3

1

由于使用 Ext.Viewport.setActiveItem({xtype: 'blog'}) 不会重用您创建的 xtype，因此在尝试使用博客列表时会感到困惑。我使用了Roberto 所说的一些内容和一些我自己的代码，最终得到了如下所示的控制器 'button[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，然后每次都重复使用它，因此下一个列表中的导航和主页上的导航一样有效

于 2012-05-14T19:16:04.640 回答
0

如果您使用的是navigationView，您可以通过点击按钮轻松切换视图。

  • 将您的主视图作为 navigationView 。
  • 将按钮放入 navigationView 。

  • 将以下代码写入按钮的 Tap-listener

    this.up('你的 navigationView xtype').push({
              xtype: '你想通过按钮点击的视图的 xtype'
    });

于 2012-04-27T05:36:59.230 回答
0

您必须遵循的 2 个步骤

  1. 在视图中 

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


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

注意按钮操作

2.在控制器中

首先将特定视图 xtype 指定为该控制器中的 ref

    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);
         },
于 2013-04-03T09:21:25.753 回答