时间戳

首页 > 解决方案 > 带有子面板和圆环图的 ExtJS 面板布局

extjs - 带有子面板和圆环图的 ExtJS 面板布局

问题描述

我正在尝试实现类似于下面的布局，其中一个面板左侧包含 2 个框，右侧包含一个圆环图（包含在它自己的面板中）。

单击左侧的任一框将触发图表的重新加载。

我不清楚哪些元素最适合左侧的可点击框，以及如何将它们与图表对齐。容器会更容易根据需要定位元素吗？

感谢您的任何帮助。

我正在努力实现

标签： extjsextjs5

解决方案

要实现你想要的布局，有几种方法。最流行的是边框布局和组合 v hbox 和 vbox 布局。我会展示两者。

对于单击侦听器，如果按钮不是选项，您也可以使用容器，侦听器实现也在示例中。

边框布局主要用于主面板。

这是边框布局示例，这里是小提琴

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

推荐阅读