调整大小事件后，Hbox布局面板不会自动调整项目

Question

我有一个可调整大小的面板，其中包含另一个内置hbox布局的面板。整个显示设置是正确的期望一个行为;渲染后用鼠标调整主面板大小;它不是自动装入物品。

成功地适应那些项目; 需要再次调整主面板的大小或从工具配置的齿轮刷新主面板。如何将此鼠标事件的大小调整为自动调整？

这是screenshot和两个小组的代码段;

主要小组：

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 [];
    }, 

这里称为子面板;

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

这是因为所有layout的默认Containers为Auto Layout

制作BasePanel布局hbox或vbox如果您希望它可滚动，请不要设置align

Answer 2

  

如何将此鼠标事件的大小调整为自动调整

您需要使用 flex 配置ExtJS子项自动调整。

的Flex

Flex可以应用于框布局的子项（Ext.layout.container.VBox或Ext.layout.container.HBox）。具有flex属性的每个子项将根据该项的相对 flex值填充空间（水平在 hbox 中，垂直在 vbox 中）指定了flex值的所有项目的总和。

任何 flex 0 或 undefined 的子项目都不会被'弯曲'（初始大小）不会改变。）

在 FIDDLE 中，我使用可调整大小的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: 'lisa@simpsons.com',
                    phone: '555-111-1224'
                }, {
                    name: 'Bart',
                    email: 'bart@simpsons.com',
                    phone: '555-222-1234'
                }, {
                    name: 'Homer',
                    email: 'homer@simpsons.com',
                    phone: '555-222-1244'
                }, {
                    name: 'Marge',
                    email: 'marge@simpsons.com',
                    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'
                }]
            }]
        })
    }
});