I have Viewport in an ExtJs app. When rqstPanel is collaped, rsltsPanel get activated. But it is not resizing.

Ext.create('Ext.Viewport', {

layout: 'border',

align: 'center',

border : 0,

defaultAlign : 'center',

items: [

{

region: 'north',

align: 'center',

html : 'some html '

},

{

region: 'center',

align: 'center',

minHeight: 500,

items: [rqstPanel, rsltsPanel]

}

]

});

I have also tried :

Ext.create('Ext.Viewport', {

layout: 'border',

align: 'center',

border : 0,

defaultAlign : 'center',

items: [

{

region: 'north',

align: 'center',

html : 'some html'

},

{

region: 'center',

align: 'center',

minHeight: 500,

items: [rqstPanel]

}

{

region: 'south',

align: 'center',

minHeight: 500,

items: [rsltPanel]

}

]

});

网友答案:

Like Thomas said, the example you link to works only because the the items are located in the viewport directly. The viewport is using border layout. Your rqstPanel is a subitem of a panel, and that panel is then in the border layout. So when the rqstpanel is collapsed it's parent, the panel, is not collapsed.

This is due to the default xtype is 'panel' and you add rqstPanel as a child of that panel throught it's items configuration. This code here produces a panel that sits between the rqstPanel and the viewport.