Панель макета Hbox не подгоняет элементы автоматически после изменения размера - PullRequest
Новая
       23

Панель макета Hbox не подгоняет элементы автоматически после изменения размера

0 голосов
/ 19 мая 2018

У меня есть панель с изменяемыми размерами, которая включает в себя другую панель с макетом hbox внутри.Все настройки дисплея верны, ожидайте одного поведения;при изменении размера основной панели мышью после рендера;это не автоматическая подгонка предметов внутри.

Чтобы быть успешным, подойди к этому предмету; необходимо изменить размер главной панели еще раз или обновить основную панель из шестерни конфигурации инструмента .Как настроить автоматическое изменение размера события мыши?

Вот скриншот и оба фрагмента кода панели;

Основная панель: 

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: [
        {

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Как настроить изменение размера события мыши как автоматически подгоняемое

Вам необходимо использовать flex config для ExtJS childэлементы для автоматической настройки.

Flex

Flex может применяться к дочерним элементам макета коробки ( Ext.layout.container.VBox или Ext.layout.container.HBox ).Каждый дочерний элемент со свойством flex заполнит пространство (по горизонтали в hbox , по вертикали в vbox ) в соответствии с относительным значением flex этого элемента по сравнению с суммой всехэлементы с указанным значением flex.

Любые дочерние элементы, которые имеют flex из 0 или undefined , будутне сгибаться (исходный размер не изменится).

В этом FIDDLE я создал демо с использованием изменяемого размера panel,Надеюсь, что это поможет / поможет вам в достижении ваших требований.

КОД 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'
                }]
            }]
        })
    }
});
0 голосов
/ 19 мая 2018

Это происходит потому, что по умолчанию layout для всех Containers равно Auto Layout

Сделать BasePanel макет hbox или vbox, и если вы хотите, чтобы его можно было прокручивать, не устанавливайте align

...