Question

点击新闻，我想推送视图（卡片）。这是我的控制器。我没有使用导航视图。如何做到这一点。

config:{
    routes:{
        'News/index': 'showNews',
    },
    refs : {
        main : 'mainpanel',
    },

    control : {
        'navigation': {
                   select : 'showLanding'
                 }
           }
     },

    showNews : function(){
                 this.getMain().add({
                   xtype: 'blogview'
                    });
                },
    showLanding :   function(list,record) {
                           switch(record.data.navLink){

                               case "NEWS" : {
                                              this.getMain().setActiveItem('blogview');                                        
                                              break;
                                            }
                                case "PHOTOS" : {

                                               this.getMain().push({                                             
                                                 xtype:'photoview',
                                              });
                                              break;
                                            }

                            }
                          }

我认为我们无法在导航视图中提供两个或更多项目。你能帮助吗

提前致谢。：）

Answer 1

您可以在setActiveItem布局的容器上使用card。这是一个简单的例子：

Ext.setup({
    onReady:function(){
        var container = Ext.create('Ext.Container', {
            layout: 'card',
            items: [
                {
                    items: [
                        {
                            xtype: 'button',
                            text: 'Tap this to add a new view',
                            handler: function() {
                                container.setActiveItem({
                                    html: 'This is the new item.'
                                });
                            }
                        }
                    ]
                }
            ]
        });

        Ext.Viewport.add(container);
    }
});

您可以通过在layout配置中指定动画来添加动画：

layout: {
    type: 'card',
    animation: {
        type: 'slide',
        direction: 'left',
        duration: 1000
    }
}

完整的存在：

Ext.setup({
    onReady:function(){
        var container = Ext.create('Ext.Container', {
            layout: {
                type: 'card',
                animation: {
                    type: 'slide',
                    direction: 'left',
                    duration: 1000
                }
            },
            items: [
                {
                    items: [
                        {
                            xtype: 'button',
                            text: 'Tap this to add a new view',
                            handler: function() {
                                container.setActiveItem({
                                    html: 'This is the new item.'
                                });
                            }
                        }
                    ]
                }
            ]
        });

        Ext.Viewport.add(container);
    }
});

Answer 2

1）将ID分配给您想要更改其视图的容器。

2）在你的控制器中，通过ID获取对容器的引用，并调用适当的方法来加载视图。

例如，如果您使用Navigation.View作为容器，请调用push方法以加载所需的视图

Ext.ComponentManager.get('mynavigationview').push({
      title: 'Second',
      html: 'Second view!'
      });

请注意，使用'Ext.ComponentManager.get'作为'Ext.get'的需要不适用于Components。

Answer 3

以下是我所拥有的控制器的示例。我删除了onListItemTap方法上的额外代码。

确保您的参考确实有效。如果您的'mainPanel'是导航视图，您可以像这样推送新项目：

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        mainPanel: 'main'
    },

    control: {
        "list": {
            itemtap: 'onListItemTap'
        }
    }
},

onListItemTap: function (dataview, index, target, record, e, options) {
    var myView = Ext.create('Ext.Container', {
    ...
    ...
    });

    this.getMainPanel().push(myView);
}

});

对于你的mainPanel，这样的事情应该有效：

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',
    xtype: 'main',

    config: { }
});

Sencha touch 2 - 如何在单击列表项时推送新视图

3 个答案: