ここでやろうとしているのは、カルーセルのパネル内でカード レイアウトを使用することです。しかし、カード レイアウトを作成することが一般的ではなく、カルーセルが実際にはカード レイアウトのようなコンテナーの 1 つであることは不可能に思えます。なので、Sencha Touch 2 で実現できるかなと。
これが私のメインビュー、プレーンなカルーセルコンテナです:
Ext.define("myapp.view.Main", {
extend: 'Ext.carousel.Carousel',
config: {
defaults: {
styleHtmlContent : true
},
activeItem: 0,
items: [
{
xtype: 'firstview'
},
{
xtype: 'secondview'
},
{
xtype: 'thirdview'
}
]
}
});
これが私の「firstview」で、Ext.Panel をカルーセル コンテナの一部として拡張します。
Ext.define("myapp.view.Compose", {
extend: 'Ext.Panel',
xtype: 'firstview',
requires: [
'Ext.form.FieldSet',
'Ext.TitleBar',
'Ext.form.Text',
'Ext.Button'
],
config: {
styleHtmlContent: true,
scrollable: true,
layout: 'vbox',
items: [
{ // title bar
xtype: 'titlebar',
docked: 'top',
title: 'a Title here'
},
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{ // controll button set - to change view for composing different kinds of messages
xtype: 'segmentedbutton',
allowDepress: true,
allowMultiple: false,
items: [
{
text: 'subview-1',
pressed: true
},
{
text: 'subview-2'
},
{
text: 'subview-3'
}
]
}
]
},
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
config: {
height: '100%',
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
}
]
}
});
ご覧のとおり、このパネル内にカード レイアウトがあります。しかし、実際には何も表示されません。
もちろん、ここで同様のことを達成する別の方法を見つけることができますが、カード コンテナーをカード レイアウトのようなコンテナー (たとえば、「tabPanel」または「carousel」) に埋め込むことは不可能であることを知りたいだけです。煎茶タッチ2?