Hbox layout panel doesn't auto fit items after resize event

Question

I've a resizable panel which includes another panel with hbox layout inside. Whole display settings are correct expect one behaviour; when resizing main panel with mouse after render; it's not auto-fit items inside.

To be success fit those item; need to resize main panel once again or refreshing main panel from tool config's gear. How can I set this mouse event resizing as auto-fit?

Here is a screenshot and both of panel's code snippets;

Main Panel:

Ext.define('MyApp.BasePanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'basepanel',

    resizable: true,
    scrollable: true,
    frame: true,

    plugins: 'responsive',

    tools: [
        {
            type: 'refresh',
            handler: 'refreshPanel'
        },
        {
            type: 'gear',
            handler: 'setPanel'
        }
    ],

    initComponent: function() {
        var me = this;

        me.items = me.setupItems();
        me.callParent();
    },

    setupItems: function() {
        var me = this;

        return Ext.Array.merge(me.getChildPanel(), me.getOtherChildPanel());
    },

    getChildPanel: function () {
        return [];
    }, 

    getOtherChildPanel: function () {
        return [];
    }, 

Here is called child panel;

Ext.define('MyApp.ChildComponent', { 
//Calling this class with 'getChildPanel()' method on BasePanel.
    extend: 'Ext.container.Container',
    alias: 'widget.mychildcomponent',

    layout: {
        type: 'hbox', align: 'stretch', pack: 'center'
    },

    defaults: {
        margin: 10,
        width: 300,
        height: 90,
        flex: 1
    },

    items: [
        {

Answer 1

How can I set this mouse event resizing as auto-fit

You need to use flex config for ExtJS child items to automatically adjust.

Flex

Flex may be applied to child items of a box layout (Ext.layout.container.VBox or Ext.layout.container.HBox). Each child item with a flex property will fill space (horizontally in hbox, vertically in vbox) according to that item's relative flex value compared to the sum of all items with a flex value specified.

Any child items that have either a flex of 0 or undefined will not be 'flexed' (the initial size will not be changed).

---

In this Fiddle, I have created a demo using resizable panel.

Code snippet

Ext.application({
    name: 'Fiddle',

    launch: function () {


        Ext.define('CommonGrid', {
            extend: 'Ext.grid.Panel',
            xtype: 'commongrid',
            title: 'Data',
            store: {
                fields: ['name', 'email', 'phone'],
                data: [{
                    name: 'Lisa',
                    email: '[email protected]',
                    phone: '555-111-1224'
                }, {
                    name: 'Bart',
                    email: '[email protected]',
                    phone: '555-222-1234'
                }, {
                    name: 'Homer',
                    email: '[email protected]',
                    phone: '555-222-1244'
                }, {
                    name: 'Marge',
                    email: '[email protected]',
                    phone: '555-222-1254'
                }]
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }]
        });

        Ext.create({
            xtype: 'panel',
            layout: 'vbox',
            title: 'Demo',
            bodyPadding: 10,
            width: 500,
            border: true,
            resizable: true,
            draggable: true,
            tools: [{
                type: 'refresh'
            }, {
                type: 'settings'
            }],
            renderTo: Ext.getBody(),
            defaults: {
                layout: 'hbox',
                xtype: 'container',
                width: '100%',
                flex: 1,
                defaults: {
                    xtype: 'button',
                    margin: '0 10',
                    flex: 1
                }
            },
            items: [{
                maxHeight:30,
                items: [{
                    text: 'Button 1'
                }, {
                    text: 'Button 2'
                }, {
                    text: 'Button 3'
                }]
            },{
                xtype:'tbspacer',
                height:10,
                maxHeight:10
            }, {
                items: [{
                    xtype: 'commongrid'
                }, {
                    xtype: 'commongrid'
                }]
            }]
        })
    }
});