ext-js页面布局

首先这个布局分上中下，然后中间又分左中右，我把各个区域都单独成一个JS类，便于重用。以后遇到这种布局就一劳永逸，(*^__^*) 。下面分别贴出各个区域的JS类源码：
//顶部Panel类：
Ext.namespace("sys");
sys.TopPanel = Ext.extend(Ext.Panel,{
constructor:function(cfg){
if(!cfg)cfg = {};
cfg.id = 'topPanel';
cfg.height = 60;
cfg.bodyStyle = 'background:transparent;';
cfg.html = '<iframe width= 100% height=99 frameborder=0 scrolling=no src=\'Top.jsp\'></iframe>';
cfg.region = 'north';
sys.TopPanel.superclass.constructor.call(this, cfg);
}
}
);
顶部panel我嵌入一个iframe,iframe再链接到一个jsp页面，top.jsp的代码就不用贴了，再简单不过了。
然后是BottomPanel类：
Ext.namespace("sys");
sys.BottomPanel = Ext.extend(Ext.Panel, {
constructor: function(cfg) {
if (!cfg) cfg = {};
cfg.id = 'bottomPanel';
cfg.title = '底部面板';
cfg.height = 65;
cfg.bodyStyle = 'background:transparent;';
cfg.iconCls = 'footIcon';
cfg.html = '<iframe width=100% height=50 frameborder=0 scrolling=no src=\'Bottom.jsp\'></iframe>';
cfg.region = 'south';
cfg.collapsible = true;
cfg.collapseMode = 'mini';
cfg.titleCollapse = true;
// var bbar = new Ext.Toolbar(
// {
// items: [
// '->',
// {
// text: '我的消息',
// iconCls: 'msgIcon'
// }
// ]
// }
// );
// cfg.tbar = bbar;
sys.BottomPanel.superclass.constructor.call(this, cfg);
}
}
);
然后是左侧Panel类：
Ext.namespace("sys");
sys.LeftPanel = Ext.extend(Ext.Panel, {
constructor: function(cfg) {
if (!cfg) {
cfg = {};
}
cfg.id = "leftPanel";
cfg.title = '导航菜单';
cfg.iconCls = 'appIcon';
cfg.width = 160;
cfg.height = 600;
cfg.region = 'west',
cfg.collapsible = true;
cfg.animCollapse = true;
cfg.split = true;
cfg.collapseMode = 'mini';
cfg.layout = 'accordion';
//var theme = new Ext.ux.ThemeChange();
//cfg.tbar = theme;
sys.LeftPanel.superclass.constructor.call(this, cfg);
}
});
//右侧Panel类：
Ext.namespace("sys");
sys.RightPanel = Ext.extend(Ext.Panel, {
constructor: function(cfg) {
if (!cfg) {
cfg = {};
}
cfg.id = 'rightPanel';
cfg.title = '编辑窗口';
cfg.iconCls = 'editIcon';
cfg.width = 305;
cfg.height = 600;
cfg.region = 'east';
cfg.layout = 'form';
cfg.collapsible = true;
cfg.titleCollapse = true;
cfg.animCollapse = true;
cfg.split = true;
cfg.collapseMode = 'mini';
cfg.bodyStyle = 'background:#ccd9e9;';
cfg.collapsed = true; //渲染面板后面板默认处于闭合状态
cfg.layout = 'fit';
sys.RightPanel.superclass.constructor.call(this, cfg);
}
});
接着下面是CenterPanel中间面板类全部源码：
Ext.namespace("sys");
sys.CenterPanel = Ext.extend(Ext.TabPanel, {
constructor: function(cfg) {
if (!cfg) cfg = {};
cfg.id = 'centerTabPanel';
cfg.width = 500;
cfg.height = 600;
cfg.activeTab = 0; //默认打开第一个标签页
cfg.tabWidth = 150;
cfg.minTabWidth = 120;
cfg.enableTabScroll = true;
cfg.autoScroll = true; //标签页超过范围是否显示滚动按钮
cfg.region = 'center';
//var theme = new Ext.ux.ThemeChange();
//cfg.bbar = ["<span style='color:#00aa00;'>更换皮肤</span>：",theme];
var wpanel = new Ext.Panel({
id: 'wel',
title: '欢迎页面',
border: false,
closable: true,
iconCls: 'modelIcon',
bodyStyle: 'padding-top:3px;',
listeners: {
'render': function() {
wpanel.getUpdater().update({
url: 'Welcome.jsp'
});
}
}
});
cfg.items = [wpanel];
cfg.activeItem = 0;
sys.CenterPanel.superclass.constructor.call(this, cfg);
}
});
然后是整个区域的面板类MainPanel,采用border布局，把上面的TopPanel，BottomPanel,LeftPanel,RightPanel,CenterPanel放置进去,下面是MainPanel的源码：
Ext.namespace("sys");
sys.MainPanel = Ext.extend(Ext.Panel, {
constructor: function(cfg) {
if (!cfg) {
cfg = {};
}
cfg.width = 1025;
cfg.height = 643;
cfg.border = true;
cfg.layout = 'border';
//center
this.center = new sys.CenterPanel();
//left
this.left = new sys.LeftPanel();
//right
this.right = new sys.RightPanel();
//top
this.top = new sys.TopPanel();
//bottom
this.bottom = new sys.BottomPanel();
cfg.items = [this.top, this.bottom, this.left, this.center, this.right];

sys.MainPanel.superclass.constructor.call(this, cfg);
}
}
);
封装完毕后，页面使用起来就非常爽咯，直接New个MainPanel然后丢给viewport就完事了。
下面是我index.jsp的代码：
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/sys/TopPanel.js"></script>
<script type="text/javascript" src="js/sys/BottomPanel.js"></script>
<script type="text/javascript" src="js/sys/LeftPanel.js"></script>
<script type="text/javascript" src="js/sys/RightPanel.js"></script>
<script type="text/javascript" src="js/sys/CenterPanel.js"></script>
<script type="text/javascript" src="js/sys/MainPanel.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.Msg.minWidth = 300;
var main = new sys.MainPanel(); //创建主面板
new Ext.Viewport({
lauyout: 'fit',
items: [main]
});
}
);
</script>
</body>
到此ExtJs的经典布局就彻底实现了，剩下的就是往各区域Panel里放你要的组件，比如左侧一般放TreePanel，中间放GridPanel,右侧放FormPanel，这样就彻底不用考虑恼人的布局问题