ExtJs里面，layout:’border’这种布局应该很常用，但我用的时候，因为不熟，走了一些弯路。比如说，一个页面，大体布局是这样的：
上：查询输入框
中+下：查询结果（表格，底部有分页控件）
代码如下，其中有些属性一定要设置才能达到理想的效果（参阅注释）：
var formQuery = Ext.create('QueryFormTongji', {
id: 'formPower1',region: 'north'//这个region很重要！如果没有它，此查询框将被下面的表格所屏蔽
});//查询框
var formTu = Ext.create('QueryFormTongjiTu', {
id: 'formTu', heigth: 220, region: 'north'
});//统计图
var grid = Ext.create('my.view.test.List', {
id: 'grid1',
region: 'center',
store: listStore,
columns: [……]});//查询结果（表格）
var vp = Ext.create('Ext.container.Viewport', {
layout: { type: 'border' },
items: [{
xtype: 'tabpanel',
region: 'center',
id: 'topPanel',
activeTab: 0,
items: [
{
xtype: 'panel',
title: '查询',
id: 'panelPower',
layout: 'border',//有了这个属性，表格才会随分辨率而自动显隐垂直滚动条
items: [formQuery,grid]
},
{
xtype: 'panel',
title: '统计图',
layout: 'border',
id: 'tPanel',
items: [
formTu,
{
autoScroll: true,
xtype: 'panel',
region: 'center',
contentEl: 'DivMapWinInfo'
}
]
}
],
listeners: {
tabchange: {
fn: this.onTopTabpanelTabChange,
scope: this
}
}
}]
}); 版权声明：本文为博主原屙文章，喜欢你就担走。