ext:Window中放一个Panel, 如何让这个Panel在Window中 居中显示??

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



PanelCenter.html
Ext.onReady(function(){ Ext.MyPanel = new Ext.Panel({ title:'居中的panel', width:200, height:300 }); Ext.MyWindow = new Ext.Window({ title:'我的panel居中了,真了不起!!', layout:'column', width:500, height:500, items:Ext.MyPanel }); Ext.MyWindow.render(Ext.getBody()); Ext.MyWindow.show(); });



[color=red]我做的效果如下图,没实现居中!!

[/color]

2个回答

由内向外:
panel#layout不设置(auto)
panel#autoWidth & autoHeight 设置为true
保留padding
设置内部组件大小,panel会被撑开

由外向内:
也就是之前的方案,直接修改面板大小,内部组件也会随着调整的(fit布局)

个人还是喜欢由外向内,Ext的Layout也大多都是这样的流程,干净利落,一次到位。

试试设置fit布局+padding
[code="js"]
Ext.MyWindow = new Ext.Window({
title:'我的panel居中了,真了不起!!',
layout:'fit',
bodyStyle : "padding:100px;",
width:500,
height:500,
items:Ext.MyPanel
});
[/code]

立即提问
相关内容推荐