vBox layout 'stretch' option not work in border center region

[tosha.]

Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';


Ext.onReady(function(){

var view=new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items:
[
{xtype: 'panel', title:'left panel', region:'west', width:300},
{xtype: 'panel', title:'center region', region:'center', layout:'vbox', align: 'stretch', items:[
{xtype:'panel', title:'first panel', flex:1},
{xtype:'panel', title:'second panel',flex:2}
]}

]
})

});

I cannot understand why the 'first panel' and 'second panel' do not extend on all width of the center region. What I do incorrectly?

[Animal]

align is a config of the layout

It is not a config of Panel.



layout: {
type: 'vbox',
align: 'stretch'
}

[tosha.]

Thank you for your answer. My problem is solved.