Макет панели Ext JS с подпанелями и кольцевой диаграммой - PullRequest
Новая
       30

Макет панели Ext JS с подпанелями и кольцевой диаграммой

0 голосов
/ 17 марта 2020

Я пытаюсь создать компоновку, аналогичную приведенной ниже, где панель содержит 2 поля слева и кольцевую диаграмму (находится внутри собственной панели) справа.

Нажатие на любую клетку на Слева вызвало бы перезагрузку графика.

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

Спасибо за любую помощь.

I am trying to achieve

1 Ответ

1 голос
/ 17 марта 2020

Чтобы достичь желаемого макета, есть несколько способов. Наиболее популярными являются макет границы и комбинация v hbox и vbox layout. Я покажу оба.

для прослушивателя щелчков, вы также можете использовать контейнер, если кнопка не является опцией, реализации слушателей также приведены в примерах.

макет границы mosly используется для основных панелей.

это пример макета границы, здесь - скрипка 

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: "Main Panel",
    width: "100%",
    bodyPadding: 5,
    height: Ext.getBody().getHeight(),
    layout: "border",
    items: [{
        xtype: "panel",
        title: "leftContainer",
        region: "west",
        width: 300,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            type: "conatiner",
            style: "border:1px solid red",
            html: "first container",
            flex: 1,
            listeners: {
                el: {
                    click: function () {
                        alert("first Container")
                    }
                }
            }
        }, {
            type: "conatiner",
            style: "border:1px solid red",
            html: "secon container",
            flex: 1,
            listeners: {
                el: {
                    click: function () {
                        alert("second Container")
                    }
                }
            }
        }]
    }, {
        xtype: "panel",
        margin: "0 0 0 5",
        title: "center Container",
        region: "center"
    }]
})

, и этот второй пример реализован с макетом hbox, здесь - скрипка 


Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: "Main Panel",
    width: "100%",
    bodyPadding: 5,
    height: Ext.getBody().getHeight(),
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        xtype: "panel",
        title: "leftContainer",
        width: 300,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            type: "conatiner",
            style: "border:1px solid red",
            html: "first container",
            flex: 1,
            listeners: {
                el: {
                    click: function () {
                        alert("first Container")
                    }
                }
            }
        }, {
            type: "conatiner",
            style: "border:1px solid red",
            html: "secon container",
            flex: 1,
            listeners: {
                el: {
                    click: function () {
                        alert("second Container")
                    }
                }
            }
        }]
    }, {
        xtype: "panel",
        margin: "0 0 0 5",
        title: "center Container",
        flex: 1
    }]
})
...