当前位置： 代码迷 >> JavaScript >> Extjs4开发札记(二)――框架的搭建
  详细解决方案

Extjs4开发札记(二)――框架的搭建

热度：336   发布时间：2012-09-11 10:49:03.0
Extjs4开发笔记(二)――框架的搭建

转载：http://www.mhzg.net/a/20116/201162913210280.html

Extjs4开发笔记(二)――框架的搭

本文内容已经重新更新，旧版请查看：www.mhzg.net/a/20116/201162913210280-old.html

由于最近老出差，所以代码无法及时更新。导致近一周都没有更新。

废话不多说了，上篇文章建立了比较基础的文件。今天开始搭建大体的框架，由于Extjs4在组件建立方面有了很大的改变，所以第一次建立的框架页面还是费了比较长的时间。本章内容增加了一些图片及CSS文件，目的是为了美化整个界面。增加的CSS文件：

注意事项：layout、region的使用，如果没有看API及相关文档的话，那么面对错误对话框的时候，还不知道是怎么回事。

本文将main.js放到了/app/controller文件夹下，这将是整个项目的主体文件。

而头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的基础功能，之后我们会慢慢完善这些组件。而整个页面的填充，也使用一个JS文件来完成。也许有人会问，这么多文件，是不是要都在index.html中引入啊。这样想的话，就错了哦。因为我们使用的是Extjs4，所以我们一定要使用Extjs4?动态加载功能。

先来看下自定义CSS（sytle.css）：

?
  1. #header?{?background:?#7F99BE?url(/images/layout-browser-hd-bg.gif)?repeat-x?center;}
  2. #header?h1?{font-size:?16px;color:?#fff;padding:?3px?10px;?font-family:"微软雅黑","黑体"}
  4. .tabs{}
  5. .tabs{background-image:?url(../images/menuPanel/bulletin_manager.gif)?!important;}
  6. .manage{background-image:?url(../images/menuPanel/admin.gif)?!important;}
  7. .home{background-image:?url(../images/home.gif)?!important;?line-height:30px;}
  8. .icon-menu{background-image:?url(../images/menuPanel/sys.gif)?!important;}

图片文件夹就不放上来了。从以前的项目中拷贝了一些比较靠谱的图片，大家完全可以自己去下载一些ICON图标文件而为己所用。

搭建的框架是经典的EXTJS布局模式，如图所示：

首先，我们建立index.html和app.js，index.html代码为：

?
  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html?xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
  5. <title>员工管理系统</title>
  6. <link?rel="stylesheet"?type="text/css"?href="extjs4/resources/css/ext-all.css"?/>
  7. <!--引入自定义CSS-->
  8. <link?rel="stylesheet"?type="text/css"?href="extjs4/resources/style.css"?/>
  9. <script?type="text/javascript"?src="extjs4/ext-all-debug.js"></script>
  10. <script?type="text/javascript"?src="app.js"></script>
  11. </head>
  13. <body>
  14. </body>
  15. </html>

App.js：

?
  1. Ext.Loader.setConfig({enabled:?true});
  2. Ext.application({
  3. ????name:?'SMS',
  4. ????appFolder:?'app',
  5. ????controllers:?[
  6. ????????'Main'
  7. ????]
  8. });

稍做解释：

?

?

Ext.Loader.setConfig({enabled: true});//意思是开启Ext.Loader。Ext.Loader是动态加载的核心哦。。

Ext.appliction({...});看字面意思吧，不解释。

配置中的name，我理解为是Extjs3.x、Extjs2.x中的命名空间。

appFolder，应用文件夹名字。

controllers，控制单元的名字，这里我们定义为Main。那么根据Extjs4动态加载的要求，我们需要在/app/controllers文件夹下建立Main.js文件，作为控制单元。有关Extjs4动态加载机制，请参考：www.mhzg.net/a/20117/2011721040290.html

Main.js：

?
  1. Ext.define('SMS.controller.Main',{
  2. ????extend:?'Ext.app.Controller',
  3. ????init?:?function(){
  4. ????}
  5. })

这里的Main.js中只是定义了Main这个类，且继承了Ext.app.Controller，其余都没有写。看到这里，会有人很奇怪了，index.html中引入了app.js，而app.js只是创建了Main这个类，但Main.js什么都没有，那么页面中为什么会显示出框架页面呢？这也是最多人所疑惑的。下面我来解释下这个问题。所有的原因就在于app.js这个文件中，app.js文件定义了Ext.application。而Ext.application中有个属性是autoCreateViewport?，这个属性是Boolean类型，如果值为true,那么Extjs4会自动加载view/Viewport.js文件，如果值为flase，那么必须要自己去创建一个View，这就是为什么app.js和Main.js文件都没有写相关代码，也会有界面出现。

整理下思路，由于Extjs4自动加载了view/Viewport.js，而Viewport.js文件包含了头部、菜单、内容区及底部这4个组件，那么我们必须先完成这4个文件的编写，同样，由于这4个文件是界面型的，我们将这4个文件都放到view文件夹下。

view文件夹下共5个JS文件，分别为：

Header.js、Menu.js、South.js、TabPanel.js及Viewport.js

这5个js文件的作用，我们一一介绍。

5个js文件都包含了Ext.applyIf、callParent。由于篇幅问题，Ext.applyIf、callParent等方法，请参考Extjs4相关API。

Header.js：这个是头部，也就是深蓝色底子。白色字体，那块，上面写着员工管理系统。

代码为：

?
  1. Ext.define('SMS.view.Header',?{
  2. ????extend:?'Ext.Component',
  3. ????initComponent:?function()?{
  4. ????????Ext.applyIf(this,?{
  5. ????????????xtype:?'box',
  6. ????????????cls:?'header',
  7. ????????????region:?'north',
  8. ????????????html:?'<h1>员工管理系统</h1>',
  9. ????????????height:?30
  10. ????????});
  11. ????????this.callParent(arguments);
  12. ????}
  13. });

Menu.js:

?
  1. Ext.define('SMS.view.Menu',{
  2. ????extend:?'Ext.tree.Panel',
  3. ????initComponent?:?function(){
  4. ????????Ext.apply(this,{
  5. ????????????id:?'menu-panel',
  6. ????????????title:?'系统菜单',
  7. ????????????iconCls:'icon-menu',
  8. ????????????margins?:?'0?0?-1?1',
  9. ????????????region:'west',
  10. ????????????border?:?false,
  11. ????????????enableDD?:?false,
  12. ????????????split:?true,
  13. ????????????width?:?212,
  14. ????????????minSize?:?130,
  15. ????????????maxSize?:?300,
  16. ????????????rootVisible:?false,
  17. ????????????containerScroll?:?true,
  18. ????????????collapsible?:?true,
  19. ????????????autoScroll:?false
  20. ????????});
  21. ????????this.callParent(arguments);
  22. ????}
  23. })

TreePanel并没有加载菜单项，关于Extjs4 Tree，我们后面会介绍。

?

?

TabPanel.js：

?
  1. Ext.define('SMS.view.TabPanel',{
  2. ????extend:?'Ext.tab.Panel',
  3. ????initComponent?:?function(){
  4. ????????Ext.apply(this,{
  5. ????????????id:?'content-panel',
  6. ????????????region:?'center',?
  7. ????????????defaults:?{
  8. ???????????????autoScroll:true,
  9. ???????????????bodyPadding:?10
  10. ????????????},
  11. ????????????activeTab:?0,
  12. ????????????border:?false,
  13. ???????????//plain:?true,
  14. ????????????items:?[{
  15. ??????????????id:?'HomePage',
  16. ??????????????title:?'首页',
  17. ??????????????iconCls:'home',
  18. ??????????????layout:?'fit'
  19. ????????????}]
  20. ????????});
  21. ????????this.callParent(arguments);
  22. ????}
  23. })

South.js：

?
  1. Ext.define('SMS.view.South',{
  2. ????extend:?'Ext.Toolbar',
  3. ????initComponent?:?function(){
  4. ????????Ext.apply(this,{
  5. ????????????id:"bottom",
  6. ????????????//frame:true,
  7. ????????????region:"south",
  8. ????????????height:23,
  9. ????????????items:["当前用户：Guest",'->',"技术支持:<a?href='http://www.mhzg.net'?target='_blank'?style='text-decoration:none;'><font?color='#0000FF'>http://www.mhzg.net</font></a>&nbsp;&nbsp;"]
  10. ????????});
  11. ????????this.callParent(arguments);
  12. ????}
  13. })

文件都创建好了。我们进行最后一部，布局。

Viewport.js：

?
  1. Ext.define('SMS.view.Viewport',{
  2. ????extend:?'Ext.Viewport',
  3. ????layout:?'fit',
  4. ????hideBorders:?true,
  5. ????requires?:?[
  6. ????????'SMS.view.Header',
  7. ????????'SMS.view.Menu',
  8. ????????'SMS.view.TabPanel',
  9. ????????'SMS.view.South'
  10. ????],
  11. ????initComponent?:?function(){
  12. ????????var?me?=?this;
  13. ????????Ext.apply(me,?{
  14. ????????????items:?[{
  15. ????????????????id:'desk',
  16. ????????????????layout:?'border',
  17. ????????????????items:?[
  18. ????????????????????Ext.create('SMS.view.Header'),
  19. ????????????????????Ext.create('SMS.view.Menu'),
  20. ????????????????????Ext.create('SMS.view.TabPanel'),
  21. ????????????????????Ext.create('SMS.view.South')
  22. ????????????????]
  23. ????????????}]
  24. ????????});
  25. ????????me.callParent(arguments);
  26. ????}
  27. })

重点：requires属性，这个我理解为创建引用。稍懂编程语言的人应该都明白。但是光引用还不够，我们还需要去实例化它，也就是Ext.create。至此，我们的框架已经顺利搭建完毕。

?

?

今天的工作也就是这么多，搭建完框架之后，会慢慢丰富整个系统。本来想连菜单的树也完成，最后想了想，这工作还是留到明天吧。因为树涉及到了异步获取，需要有服务端程序，今天弄好框架之后，把服务端代码写好了，明天来完成这棵树的实现吧。

需要注意的一点，在extjs4中，只要定义了布局为border，那么他的items中必须要有region: 'center'的组件，否则将会提示错误。貌似在extjs3.x甚至是以前的版本都没发现有这样的要求，因为这个，费了老大的劲才调整过来，再一看，代码全部变了，已经跟extjs3.x的风格完全不同了。令人欣喜的是，现在的代码完全符合extjs4的风格，也完全符合我的预期。

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.