Sencha touch &引用；大师；在森查触摸视图

我想为我的SenchaTouch2应用程序创建主/基视图。它应该有页眉、页脚和内容区域。页眉和页脚是静态的，但内容应该在具体视图中声明。

---

我在sencha文档中找不到解决问题的方法。也许这是个错误的方法？任何指向sencha指南的链接都会很有帮助。

对于这种类型的功能，您可以使用导航视图或创建具有卡片布局的任何一个视图，并放置两个顶部和底部固定的项目，然后根据需要对第三个itam进行更改。

您应该创建一个从包含3个项目的容器或面板扩展的视图。您可以决定哪个xtype（面板、容器、工具栏等）是您的页眉和页脚，您应该使用卡片布局并停靠在顶部或按钮：停靠：“顶部”

---

然后，您可以使用第3个元素并根据需要更新视图，并根据需要使用模型和控制器。

定义一个新的Ext.Container类，其中包含页眉和页脚容器。然后创建它的新实例并插入内容视图。大概是这样的：

Ext.define('App.view.BaseView', {
    extend : 'Ext.Container',
    xtype : 'masterview',
    config : {
         items : [{
         xtype : 'container',
         height : 100,
         html : 'This is header',
         styleHtmlContent : true,
         // docked : 'top'      //if needed
       }, {
         xtype : 'container',
         height : 100,
         html : 'This is footer',
         styleHtmlContent : true,
         // docked : 'bottom'      //if needed
       }]
    }
});

var panel = Ext.create('App.view.BaseView');
panel.insert(1, {
    xtype : 'container',
    html : 'This is concrete view'
});

然后像这样使用它：

Ext.define('App.view.BaseView', {
    extend : 'Ext.Container',
    xtype : 'masterview',
    config : {
         items : [{
         xtype : 'container',
         height : 100,
         html : 'This is header',
         styleHtmlContent : true,
         // docked : 'top'      //if needed
       }, {
         xtype : 'container',
         height : 100,
         html : 'This is footer',
         styleHtmlContent : true,
         // docked : 'bottom'      //if needed
       }]
    }
});

var panel = Ext.create('App.view.BaseView');
panel.insert(1, {
    xtype : 'container',
    html : 'This is concrete view'
});

这是最基本的例子。你可以按你想要的方式调整它