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

Question

我有一个可调整大小的面板，其中包含另一个内部带有水平盒布局的面板。整个显示设置是正确的，期望一种行为；渲染后用鼠标调整主面板大小时；它不是内部自动调整项目。

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

这是一个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

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

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

弹性

Flex 可以应用于盒式布局(Ext.layout.container.VBox 或 Ext.layout.container.HBox)的子项。每个具有 flex 属性的子项目将根据该项目的 relative flex 值与指定弹性值的所有项目的总和。

任何具有 flex 的子项0 或 undefined 的 不会被“弯曲”(初始大小不会改变)。

---

在这个 Fiddle ，我已经使用可调整大小的面板创建了一个演示。

代码片段

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'
                }]
            }]
        })
    }
});