extjs如何实现flex布局

ExtJS使用Flex布局非常简单，只需要在容器的layout属性中设置为'box'或'vbox'或'hbox'即可。

例如，在一个panel中使用hbox布局：

Ext.create('Ext.panel.Panel', {
    title: 'Flex布局示例',
    width: 500,
    height: 400,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        title: '面板1',
        flex: 1
    }, {
        title: '面板2',
        flex: 2
    }, {
        title: '面板3',
        flex: 1
    }]
});

这个示例中，我们创建了一个宽度为500，高度为400的panel，使用了hbox布局，并且设置了align属性为'stretch'。在items数组中，我们定义了3个子panel，分别设置了不同的flex属性值，从而实现了不同的宽度比例。