深入剖析ExtJS 2.2实现及应用连载(10):主页面布局
2.4主页面
深入剖析ExtJS 2.2实现及应用连载 版权所有，谢绝转载 作者：彭仁夔 QQ：546711211
<frameset rows="100,*,24 " framespacing="0">
<frame noresize="noresize" target="contents" name="head"
src="pages/head.jsp" scrolling="no">
<frameset cols="180,*">
<frame name="left" src="pages/left.jsp" marginheight="0"
marginwidth="0" scrolling="no" noresize />
<frame name="right" src="pages/main.jsp" marginheight="0"
marginwidth="0" scrolling="yes" noresize />
</frameset>
<frame name="foot" src="pages/foot.jsp" marginheight="0"
marginwidth="0" scrolling="no" noresize frameborder="0" />
</frameset>
<noframes></noframes>
这个就是采用frame和frameSet把网页放在head、left,main和foot四个部分。其中head是B/S系统的头部分，主要是用来显示该系统的名字，如办公系统等。这个一般都是采用图片的形式来显示的。foot部分是用来显示主页面的一些状态信息，如版本、版权及相关的提示帮助信息。其实现也只是一些简单的静态文字或链接。中间部分分成左、右两部分，左部分是导航菜单，一般都是采用TabBox形式，用户点击一个相关的条目，就会在右边主面页中显示其要进行处理的任务，如下图： 
图2.5主面页
在Ext中，我们的应用系统的主页面也基本是按这个布局来实现的。顶部和底部都比较简单，关键的地方是在左边的导航菜单的实现，还有在右边的相对应导入的页面处理。编写main.html基本上与default.html差不多，在这里不列出代码。与它们不同的，我们要把其head标签中对于Login.js的引用给去掉，现在没有不需要那个JS文件，另外加上如下三个文件的引用：
<script type="text/javascript" src="LeftMenu.js"></script>
<script type="text/javascript" src="MainPanel.js"></script>
<script type="text/javascript" src="Main.js"></script>
其中leftMenu.js是用来处理左边导航菜单的JS文件，MainPanel.js是处理右边呈现对应用页面内容的JS文件。Main.js就实现主页面布局的JS文件，它要把左边导航菜单和主内容的页面及头部、底部统一布局起来。
Main.js和Login.js一样，也要进行tip提示、编码、状态管理进行初始化。并且也要在Ext.onReady中运行。看到这里，也许会有读者会问，难道不能把default.html和main.html都放在一个页面去实现吗？
是可以的，当请求成功之后，我不实现跳动，而是通过JS代码在default.hmtl进行呈现主页面的内容。这样做法有几点不好。一是因为所有的内容都放在登录页面，导致登录页面的引用的JS文件过多，载入会过慢。而放在两个页面，相关的JS文件引用，同一个域中它不会重复去请求传输其文件，也就是说Ext的相关文件在default.html中下载引用，在main.html就不会重复下载。对于提交处理等待时间，用户都形成一个这样心理，可以等上几秒钟而不会觉得慢。对于登录页面就不同了。
第二是安全的问题，如果在用户没有登录的情况下，就把所有相关的主页面的JS处理都载入的客户端，用户特别是黑客，很有可能会根据相关的JS文件来推猜主页面的实现，并进行攻击。把这两个分离开来，我们就可以通过服务器的session及相关的处理，使用户必须在登录之后才能访问该main.html页面，不能通过Url来直接访问。
下面我们就分别来实现它们的JS代码。
2.4.1 主页面布局
上一节已经分析了主页面的布局也分成四个部分，这个登录网页相似。也就是说它们可以采用相同的布局，即Border布局。在登录网页中我们把布局的子组件都集成了在panel的配置对象。主页面中我们把它们分开来实现：
代码清单2.7 Main.js中代码
Ext .onReady(function() {
Ext.BLANK_IMAGE_URL = 'pic/s.gif';
Ext.QuickTips.init();
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
//1、创建head部分
//2、创建foot部分
//3、创建leftMenu部分
//4、创建主内容部分
//5、建立leftmenu和mainTab两者之间的关系
//6、创建布局
});
对于主页面的实现，我们可以分成上面代码中注释的六步。
第一步是创建head部分，在这里我们通过直接导入一张标题图片做为其内容。还有我们采用Border布局，而其又在顶部，所以我们可以如下实现：
var head = new Ext.Panel( {
region : 'north',
border : false,
html : '<div style="background:url(pic/main1.gif) repeat-x; height:78px;"></div>',
height : 80
});
这里创建了一个Panel面析来作为其直接的顶部内容。其内容由html配置项来指定。这里是采用了一幅图片，它是从图2.5的顶部切的图。
第二步是创建foot部分，这部分主要是一些状态信息和版权信息。和head部分一样， 我们采用html配置项直接指定内容的panel方式来构建：
var foot = new Ext.Panel( {
region : 'south',
html :
'<div style="background:url(pic/main2.gif) repeat-x; height:33px; ">'
+ '<div style="float:left;font:normal 12px 宋体;margin:10px 0 0 0px;">'
+ 'Power By: <span style="color:blue">彭仁夔</span> </div>'
+ '<div style="float:right;margin:10px;font:normal 12px 宋体;" >'
+ '版权所有：<a href="http://www.morik.com">www.morik.com</a></div>'
+ '</div>',
height : 35
});
在这里定义系统的开发者和相对着的版权信息。
第三步是创建leftMenu部分。左边导航菜单是采用TabBox的形式，每个Box中都采用树来进行菜单条目的显示。对于这个，因为其比较复杂，我们想在另外一个文件去实现，在这里只要引用或创建就可以了。
也就是说把这个LeftMenu构建成类的形式，在主页面只要通过new 来生成它就可以。如下面：var leftmenu = new Morik.Office.LeftMenu();这里也就是说我们要创建一个Morik.Office.LeftMenu()类。
为了能在其构建之前就能看到布局效果，我们也可以先采用一个空内容的Panel来代替。
var leftmenu = new Ext.Panel( {
region : 'west',
html : '<div>导航菜单</div>',
width : 200
});
第四步创建主内容部分，这一部分和leftMenu部分一样，我们采用通过生成一个类来构建它的实例。如：var mainTab = new Morik.Office.MainingPanel();。为了能在其构建之前就能看到布局效果，我们也可以先采用一个空内容的Panel来代替。
var mainTab = new Ext.Panel( {
region : 'center',
html : '<div>主内容部分</div>'
});
第五步是建立二者之间的关系。菜单和主内容页面的关系就是点击菜单中一个条目，在主内容部分就会导上该条目对应的页面内容。在这里，最为通常的想法是事件的实现，也就是leftMenu中有一个click事件，如果点在树的叶子节点上，那么就根据这个条目中的id在主内容部分导入该内容。如下面代码：
代码清单2.8 Main.js中代码
leftmenu.on("nodeClick", function(nodeAttr) {
mainTab.loadTab(nodeAttr);
});
这里是假如leftMenu类中有一个事件nodeClick（因为该类还没有实现，先提出要求，之后便可以在类中实现），它是指当点击菜单条目时就会触发的事件。现在我们为它注册一个回调函数。这个回调函数实现主内容类根据其传入的节点信息来判断是要导入什么内容。在这里我们假设MainingPanel类有一个loadTab方法用来实现导入。
在这里，我们就为leftMenu和MainingPanel分别给出了它的需求，一个是必须要实现个nodeClick事件，一个是要实现loadTab函数。
第六步布局。它的布局和登录页面的布局是一样，但是有一点不同，那就是这个布局是占据整个浏览器的内容区域。而Panel的布局是要指定宽高和位置。这里就不需要了。在Ext中有一个Panel相对的类叫ViewPort，它的唯一的作用就是会根据用户屏幕的大小而自动调整个布局用来使用整个内容都装满在浏览器的全部区域。除了使用的类名不同，其它的配置项和登录页面中Panel相类。
var viewport = new Ext.Viewport( {
layout : 'border',
style : 'border:#024459 2px solid;',
items : [head, foot, leftmenu, mainTab]
});
在这里我们还是要指定布局方式，这里采用了'border'。其面板的子组件都已经在第一到四步创建，这时只要给出其变量名就可以了。
我们只要把这个六步中的代码分别放入到代码2.7中六步中去，就可以看到布局的效果。对于第三、四步，我们还没有实现其类，所以在其部分，只能看到空白内容。下面我们就要分别实现这两个类。
深入剖析ExtJS 2.2实现及应用连载 版权所有，谢绝转载 作者：彭仁夔 QQ：546711211
