问题描述:

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.

So the example has this hierarchy:

Viewport (layout: 'border')
 - Panel (north)
 - Panel (center)
 - Panel (south)

When fxp the center panel is collapsed, the layout of the viewport will resize the siblings to fill the available space.

You have this:

Viewport (layout: 'border')
 - Panel (north) with content 'some html'
 - Panel (center)
   - Panel rqstPanel
 - Panel (south)
   - Panel rsltPanel

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.

{
    region: 'center',
    align: 'center',
    minHeight: 500,
    items: [rqstPanel]
}

So when rqstPanel is collapsed it's parent (center) is not resized by the viewport as all items it has (north/center/south) are of equal importance and wil take equal amount of height.

Basically what Thomas said will solve your problem. Don't let rqstPanel and rsltPanel be subitems of panels that are items in the viewport - add them directly as children.

basically what you want is to add your rqstPanel directly.

Ext.define("MyApp.view.RequestPanel", {
    extend: "Ext.panel.Panel",
    alias: "widget.requestPanel",
    // other configs for this panel
});

Ext.define("MyApp.view.ResultsPanel", {
    extend: "Ext.panel.Panel",
    alias: "widget.resultsPanel",
    // other configs for this panel
});

Ext.create('Ext.Viewport', {
    layout: 'border',
    align: 'center',
    border : 0,
    defaultAlign : 'center',
    items: [
        {
            region: 'north',
            align: 'center',
            html : 'some html'
        },
        {
            xtype: 'requestPanel',
            region: 'center',
            align: 'center',
            minHeight: 500
        },
        {
            xtype: 'resultsPanel',
            region: 'south',
            align: 'center',
            minHeight: 500
        }
    ]
}); 
相关阅读:
Top