建立一个窗口,窗口中包含一个id为id:'notepanel'的 newpanel 在窗口大小变化时,监听窗口大小变化事件,并根据变化后的窗口大小,去调整里面panel(可以是某种布局的多个panel)的大小 就实现了窗口内部件自适应窗口大小.
//建立窗口
createWindow: function () {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('notes');
if (!win) {
win = desktop.createWindow({
border: false,
id: 'notes',
title: '记事本',
width: 800,
height: 600,
maximizable: true,
resizable: true,
iconCls: 'icon-notes',
hideMode: 'offsets',
constrain: true,
listeners: { resize: function (t, w, h) { //监听窗口大小变化事件
if (!Ext.isEmpty(Ext.getCmp('notepanel'))) {
Ext.getCmp('notepanel').setHeight(h - 30); //改变窗口内部件的大小
Ext.getCmp('notepanel').setWidth(w - 3);
}
}
},
layout: 'fit',
items: newpanel //窗口内包含的部件
});
}
win.show();
return win;
};
//定义窗口内部件
var newpanel = Ext.widget('form', {
border: false,
bodyPadding: 10,
id:'notepanel', //部件id
width:500,
height:300,
layout: 'column',
....
});
窗口大小变化前后对比