如何在ExtJS窗口底部左右角分布按钮？布局问题求助

我有一个ExtJS窗口，希望将Save和Cancel按钮添加到items中。我了解buttons配置，但该配置在缩放时无法显示滚动条，因此考虑将按钮像其他组件一样添加到items中。

现有代码如下：

Ext.application({    
    name: 'Fiddle',    
    launch: function () {        
        Ext.create('Ext.form.Panel', {            
            title: 'My Form',            
            id: 'myform',            
            renderTo: Ext.getBody(),            
            width: 500,            
            layout: {                
                type: 'vbox',            
            },            
            items: [                
                {                    
                    xtype: 'textarea',                    
                    id: 'myText',                    
                    width: '100%',                    
                    anchor: '100% 95%',                    
                    hideLabel: true,                    
                    value: 'Some text'                
                },                
                {                    
                    xtype: 'container',                    
                    layout: {                        
                        type: 'hbox',                        
                        pack: 'right'                    
                    },                    
                    items: [                        
                        {                            
                            xtype: 'button',                            
                            text: 'Highlight',                            
                            cls: 'green-button',                            
                            handler: function () {                                
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nClicked!');                            
                            }                        
                        },                         
                        {                            
                            xtype: 'button',                            
                            text: 'Highlight2',                            
                            cls: 'green-button',                            
                            handler: function () {                                
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nClicked!');                            
                            }                        
                        }                    
                    ]                
                },               
            ]        
        });    
    }
});

但无论如何设置，按钮始终并排显示，我希望将按钮分别显示在窗口底部的左下角和右下角。

要实现按钮分置左右的效果，可按以下方式调整代码：

1. 给按钮所在容器设置width: '100%'，确保它占满父容器宽度
2. 在hbox布局中添加一个弹性占位组件（设置flex: 1），利用布局特性将两个按钮分别推到左右两端
3. 给表单面板添加autoScroll: true，确保缩放时能正常显示滚动条

修改后的完整代码如下：

Ext.application({    
    name: 'Fiddle',    
    launch: function () {        
        Ext.create('Ext.form.Panel', {            
            title: 'My Form',            
            id: 'myform',            
            renderTo: Ext.getBody(),            
            width: 500,
            autoScroll: true, // 添加滚动支持
            layout: {                
                type: 'vbox',
                align: 'stretch' // 让子组件横向占满宽度            
            },            
            items: [                
                {                    
                    xtype: 'textarea',                    
                    id: 'myText',                    
                    flex: 1, // 让文本域自动填充剩余空间
                    hideLabel: true,                    
                    value: 'Some text'                
                },                
                {                    
                    xtype: 'container',
                    width: '100%',
                    margin: '10 0 0 0', // 添加上边距和文本域区分开
                    layout: {                        
                        type: 'hbox'                    
                    },                    
                    items: [                        
                        {                            
                            xtype: 'button',                            
                            text: 'Cancel', // 左下角按钮
                            cls: 'green-button',                            
                            handler: function () {                                
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nCancel Clicked!');                            
                            }                        
                        },
                        {
                            xtype: 'component',
                            flex: 1 // 弹性占位，撑开左右按钮间距
                        },                         
                        {                            
                            xtype: 'button',                            
                            text: 'Save', // 右下角按钮
                            cls: 'green-button',                            
                            handler: function () {                                
                                Ext.getCmp('myText').setValue(Ext.getCmp('myText').getValue() + ' \nSave Clicked!');                            
                            }                        
                        }                    
                    ]                
                },               
            ]        
        });    
    }
});

调整后，Cancel按钮会固定在容器左下角，Save按钮固定在右下角，同时表单在缩放时会自动出现滚动条。

内容的提问来源于stack exchange，提问作者harunB10