1

水平スペース全体を占めるパネルAをレンダリングしようとしています。次に、パネル A の下に B と C の 2 つのパネルをレンダリングしようとしています。どちらも水平方向のスペースの 50% を占めています。

したがって、達成したいのはこの構造です：

-------------
|     A     |
-------------
|  B  |  C  |
-------------

しかし、このフィドルに示されているように、次のパネルレンダリングを実現しています:

-------------
|     A     |
-------------
|     B     |
-------------
|     C     |
-------------

上記のように、必要なアライメントを実現するためにフィドルを自由にフォークしてください。

4

1 に答える 1

3

次のようなビューがありますか。

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.container.Container',
    padding: 10,
    layout: {
        align: 'stretch',
        pack: 'center',
        type: 'vbox'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    flex: 1,
                    height: 150,
                    title: 'A'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    height: 150,
                    layout: {
                        padding: '10 0 10 0',
                        align: 'stretch',
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'panel',
                            flex: 1,
                            width: 150,
                            title: 'B'
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            width: 150,
                            title: 'C'
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }
});
于 2013-04-14T15:22:50.463 に答える