1

ここでやろうとしているのは、カルーセルのパネル内でカード レイアウトを使用することです。しかし、カード レイアウトを作成することが一般的ではなく、カルーセルが実際にはカード レイアウトのようなコンテナーの 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?

4

1 に答える 1

1

Compose ウィジェットで、その部分を id:'id_compose_card' に置き換えます。

これとともに

{
    xtype: 'container',
    id: 'id_compose_card',
    layout: {
        type: 'card',
        align: 'center',
        pack: 'top'
    },
    flex: 1,
    items: [
        {
            html: 'card 1'
        },
        {
            html: 'card 2'
        }
    ]
}

config オブジェクト内のパーツを取り出して、外側に配置しました。クラス定義の別の構成オブジェクト内に構成をネストできないと感じています。多くの人が問題を抱えており、これが問題のようです。フォーラムでこれを確認することをお勧めします。

次に、属性も置き換えました

height: '100%',

これとともに

flex:1

これにより、コンポーネントが残りのスペースを埋めるように vbox レイアウトに指示されます。

于 2012-08-08T14:04:00.397 に答える