如何更改面板extjs4中的可折叠位置？

<!-- HTML 文件 -->
<div id="panel"></div>

<!-- JavaScript 文件 -->
var panel = Ext.create('Ext.panel.Panel', {
    id: 'panel',
    width: 300,
    height: 200,
    tbar: [
        {
            xtype: 'button',
            text: '按钮1',
            handler: function() {
                console.log('按钮1 被点击了');
            }
        },
        {
            xtype: 'button',
            text: '按钮2',
            handler: function() {
                console.log('按钮2 被点击了');
            }
        }
    ],
    bbar: [
        {
            xtype: 'button',
            text: '展开区域1',
            handler: function() {
                console.log('展开区域1 被点击了');
            }
        },
        {
            xtype: 'button',
            text: '展开区域2',
            handler: function() {
                console.log('展开区域2 被点击了');
            }
        }
    ]
});