Question

我是Sencha Touch的新手。因此，我正在构建一个带有页眉和页脚的MVC应用程序。现在我尝试将标题实现到所有页面：

首先我有一个主面板视图：

tagip.views.MainPanel = Ext.extend(Ext.Panel,{
layout: 'vbox',
scroll: 'vertical',
cls : 'general',

initComponent: function () {

    Ext.apply(tagip.views, {
        header: new tagip.views.Header(),
        viewport : new tagip.views.Viewport()           
    });

    Ext.apply(this, {
        items: [
            tagip.views.header,
            tagip.views.viewport
        ]
    });

    tagip.views.MainPanel.superclass.initComponent.apply(this, arguments);  
  }
});

然后我有一个标题视图：

tagip.views.Header = Ext.extend(Ext.Panel, {
height: 20,
html : "<h1>Header</h1>",

   initComponent: function (){
       tagip.views.Header.superclass.initComponent.apply(this, arguments);  
   }
});

最后我有一个“卡片”视口，其中包含我的应用程序页面：

tagip.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen:true,
cls: 'general',
minWidth: 320,
flex: 1, 
layout: 'card',
scroll: 'vertical',
cardSwitchAnimation: 'slide',
activeItem: 0,

//items:{tagip.views.header},

initComponent: function() {
    //put instances of cards into app.views namespace


    Ext.apply(tagip.views, {
        login : new tagip.views.Login(),
        home : new tagip.views.Home()
    });
    //put instances of cards into viewport
    Ext.apply(this, {
        items: [
            tagip.views.login,
            tagip.views.home
        ]
    });
    tagip.views.Viewport.superclass.initComponent.apply(this, arguments);
  }
});

但是当我启动应用程序时，我只看到没有标题的视口内容。

有人可以帮我吗？

Answer 1

处理此问题的最佳方法是创建并注册页眉/页脚面板。

部首：

app.views.Navigation = Ext.extend(Ext.Panel, {
id: 'navigation',
height: '60',
layout: {
    type:'hbox',
    align:'stretch'
},
defaults:{flex:'1'},
style: 'text-align:center',
items: [
{
    html: '<a href="#">Item 1</a>'
},{
    html: '<a href="#">Item 2</a>'
},{
    html: '<a href="#">Item 3</a>'
}],  
initComponent : function() {
    app.views.Navigation.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('navigation', app.views.Navigation);

页脚：

app.views.Footer = Ext.extend(Ext.Panel, {
items: {
    xtype: 'panel',
    id: 'footer',
    html: '<p>Copyright 2011 Your Company, LLC. All Rights Reserved<br><a href="#">Privacy Policy</a>'
},  
initComponent : function() {
    app.views.Footer.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('footer', app.views.Footer);

使用页眉和页脚的示例视图：

app.views.Home = Ext.extend(Ext.Panel, {
scroll: 'vertical',
items: [{
    xtype: 'navigation'
},{
    xtype: 'panel',
html: '<p>this is your content</p>'
},{
    xtype: 'footer'
}],     
initComponent : function() {
    app.views.Home.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('home', app.views.Home);

然后您可以在控制器中渲染“主页”视图，如下所示：

var home = this.render({
        xtype: 'home',
        listeners: {
            deactivate: function(home) {
                home.destroy();
            }
        }
    });

    this.application.viewport.setActiveItem(home);

Answer 2

我会将您的标题内容添加为xtype：toolbar或简单地添加到dockedItems：属性。由于这是包含面板的一部分，因此其中的卡片将共享这些停靠的项目。

在您的MainPanel定义中：

// ...

cls: 'general',
dockedItems: [{
        html : "<h1>Header</h1>"
}],

// ...

具有页眉和页脚的Sencha Touch MVC应用程序

2 个答案: