[code="js"]
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../ext-2.3.0/resources/images/default/s.gif';
new Ext.Panel({
id:'mypanel',
title : 'Ext.layout.BorderLayout布局示例',
layout:'border',// 边界布局
height : 300,
width : 400,
renderTo: 'panel',
items: [
{
id:'up',
title: 'north Panel',
html : '上边',
region: 'north',// 指定子面板所在区域为north
// height: 150,
collapsible:true,
split:true//拖拉边界改变区域大小
},
{
id:'down',
title: 'South Panel',
html : '下边',
region: 'south',// 指定子面板所在区域为south
// height: 150,
collapsible:true,
split:true,
buttons:[{
id:'bt1',
text:'click',
handler:change
}]
},{
id:'left',
title: 'West Panel',
html : '左边',
region:'west',// 指定子面板所在区域为west
// width: 200,
collapsible:true,
split:true
},{
id:'right',
title: 'east Panel',
html : '右边',
region:'east',// 指定子面板所在区域为east
// width: 200,
collapsible:true,
split:true
},{
id:'center',
title: 'Main Content',
html : '中间',
region:'center',// 指定子面板所在区域为center
collapsible:true,
split:true
}]
});
function change(){
var el = Ext.get('mypanel');
el.setWidth(800);
el.setWidth(600);
Ext.Msg.alert('提示',el.getWidth()+','+el.getHeight());
};
new Ext.ToolTip({
target: 'bt1',
html: 'Click the X to close me',
title: 'My Tip Title'
});
}
);
[/code]
上面的代码中,当点击按钮时,提示框显示“800,800”,但实际上浏览器中的mypanel却没有改变大小,反而整个面板都往左移动了。
还有,如果要在点击按钮的同时,也改变mypanel的title属性为“改变后的标题”,那么要如何编写代码呢?