ExtJS粘南面板

时间:2014-04-04 12:34:47

标签: javascript extjs

我正在使用ExtJS视口边框布局。为了创造一个北部,中部和南部地区。第一个问题是视口无法显示其内容的滚动条,所以我在视口中使用了一个面板,并在其中添加了我想要的位置的面板:

Ext.create('Ext.container.Viewport', {
    id: 'viewportContainer',
    layout: {
        type: 'border',
        align: 'center'
    },
    forceFit: 'true',
    items : [{
        layout:'anchor',
        scroll:true,
        autoScroll:true,
        region : 'center',
        xtype : 'panel',
        items : [ {
            region: 'north',
            xtype: 'panel',
            bodyStyle: {
                'background': 'none'
            },
            items: [upperPanel, messagePanel()]
        },{
            layout:'anchor',
            form: searchForm.id,
            id: 'innerBody',
            region : 'center',
            xtype : 'panel',
            items : [searchForm, gridPanel ]
        } ,{
            region: 'south',
            xtype: 'panel',
            items: [bottomPanel]
        } ]
    } ]
}

我想做的是

  • 将bottomPanel粘贴到页面底部,如果是另一个 内容比可视区域(clientHeight)和
  • 如果它们更高,请将页脚放在innerBody部分的正下方。

当前实现将页脚放置在innerBody面板的正下方,但是当页面的所有内容都比可视区域(clientHeight)短时,它不会粘到底部

任何帮助都将受到高度赞赏! 谢谢

1 个答案:

答案 0 :(得分:0)

我正在执行以下代码,请检查它。

mycode的:

Ext.create('Ext.container.Viewport', {
    id: 'viewportContainer',
    layout: {
        type: 'border',
        align: 'center'
    },
    forceFit: 'true',
    items : [{
        layout:'anchor',
        scroll:true,
        autoScroll:true,
        region : 'center',
        xtype : 'panel',
        items : [ {
            region: 'north',
            xtype: 'panel',
            bodyStyle: {
                'background': 'none'
            },
            items: [upperPanel, messagePanel()]
        },{
            layout:'anchor',
            form: searchForm.id,
            id: 'innerBody',
            region : 'center',
            xtype : 'panel',
        minHeight:'540',
            items : [searchForm, gridPanel ]
        } ,{
            region: 'south',
            xtype: 'panel',
            items: [bottomPanel]
        } ]
    } ]
}

我只是应用了'minHeight'属于' innerBody'面板。有用。请试一试。