Sencha Touch MVCアプリケーション（ヘッダー/フッター）

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

ヘッダーのコンテンツをxtype：ツールバーまたは単にdockedItems：プロパティに追加します。これは収納パネルの一部なので、その中のカードはすべてこれらのドッキングアイテムを共有します。あなたのMainPanel定義で

：

// ... 

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

// ... 

Answer 2

これを処理するための最良の方法は、あなたのヘッダー/フッターのパネルを作成し、登録することです。

ヘッダー：

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