100% высота TabPanel в Ext.js (с использованием Sencha Architect)

Я использую Sencha Architect, и мне еще предстоит выяснить, как заставить содержимое TabPanel занимать 100% контейнера, в котором находится TabPanel.

Это код, который я использую сейчас:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    region: 'north',
                    height: 60
                },
                {
                    xtype: 'container',
                    region: 'center',
                    items: [
                        {
                            xtype: 'tabpanel',
                            activeTab: 0,
                            items: [
                                {
                                    xtype: 'panel',
                                    layout: {
                                        type: 'fit'
                                    },
                                    title: 'Tab 1',
                                    items: [
                                        {
                                            xtype: 'panel',
                                            title: 'My Panel'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'panel',
                                    title: 'Tab 2'
                                },
                                {
                                    xtype: 'panel',
                                    title: 'Tab 3'
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

Я совершенно не понимаю, как этого добиться, и мне не удалось найти ответ в документации Ext.js.


javascript extjs tabpanel sencha-architect
person S16    schedule 15.10.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чрезмерная вложенность. Если у вас есть контейнер без макета, вы чаще всего делаете что-то не так:

Ext.define('Foo', {
    extend: 'Ext.container.Viewport',

    layout: 'border',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'container',
                region: 'north',
                height: 60
            }, {
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                    title: 'Tab 1',
                    html: 'Tab 1'
                }, {
                    xtype: 'panel',
                    title: 'Tab 2',
                    html: 'Tab 2'
                }, {
                    xtype: 'panel',
                    title: 'Tab 3',
                    html: 'Tab 3'
                }]
            }]
        });

        me.callParent(arguments);
    }
});

Ext.onReady(function(){
    new Foo();
});
person Evan Trimboli    schedule 15.10.2012