`
wxb_love
  • 浏览: 95949 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

ExtJS 4.2.1学习笔记(二)——框架的搭建

 
阅读更多

废话不多说了,上篇文章建立了比较基础的文件。今天开始搭建大体的框架,由于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-size16px;color#fff;padding3px 10pxfont-family:"微软雅黑","黑体"}
  3. .tabs{}
  4. .tabs{background-imageurl(../images/menuPanel/bulletin_manager.gif) !important;}
  5. .manage{background-imageurl(../images/menuPanel/admin.gif) !important;}
  6. .home{background-imageurl(../images/home.gif) !importantline-height:30px;}
  7. .icon-menu{background-imageurl(../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>
  12. <body>
  13. </body>
  14. </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的风格,也完全符合我的预期。

好了,本章内容就结束了。下篇文章,将实现菜单的功能。敬请期待。

分享到:
评论
1 楼 ch520hx 2015-12-18  
[color=indigo][/color]

相关推荐

    Extjs Extjs4.2.1 例子

    Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp

    Extjs4.2.1官方文件

    Extjs4.2.1官方文件,其中包括核心代码和例子以及API

    [免费] extjs 4.2.1 api文档

    extjs 4.2.1 api文档

    extjs4.2.1

    extjs是个很好的js框架。里面含有好多的例子。你能绘制好多不同种类的图形。

    extjs 4.2.1 examples 官方例子

    http://docs.sencha.com/extjs/4.2.1/ 参考这个 ,与这个一样

    Extjs4.2.1核心包

    Extjs4.2.1核心包,做学习测试用,拷贝这些文件就行了,如果拷贝完整的包,机子很容易卡死,有这个核心就够了,不用去把完整的包全部拷贝到项目中去 引入这两个文件就够了: &lt;link rel="stylesheet" href="extjs/...

    extJs 2.1学习笔记

    21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...

    Extjs4.0学习笔记

    ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid...

    extjs4.2.1-demo

    extjs初体验 适合extjs初学者 extjs版本为4.2.1 结构简单 适合入门

    extjs4.2.1 tabPanel刷新及关闭标签

    在ExtJS框架中,`TabPanel`组件是一个非常实用且强大的UI控件,它允许用户在一个界面上组织多个相关的视图或面板,并通过标签页的形式进行切换展示。在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,...

    extjs-4.2.1

    ext-4.2.1ext-4.2.1ext-4.2.1ext-4.2.1ext-4.2.1ext-4.2.1ext-4.2.1

    ext-4.2.1-gpl

    完整版的extjs4.2.1,包括js核心代码、核心样式及例子。完整版的extjs4.2.1,包括js核心代码、核心样式及例子。

    ExtJS4中文教程2 开发笔记 chm

    Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(一)——准备工作 关于Extjs4开发笔记(二)的补充说明 在Extjs4应用中使用Ext.Loader ====...

    extjs-4.2.1的基础包.rar

    extjs-4.2.1的基础包.rar,方便自己用.

    extjs-4.2.1所有文档及库文件--完整版

    extjs-4.2.1 ExtJs所有文档及库文件,在官网下的,在官网下载比较麻烦,这个版本很好,放在这方便大家下载!

    extjs 4.2.1

    extjs 4.2.1

    桌面型ExtJS4.2.1MVC+SpringMVC3.0.5注解开发实例补充说明

    在本篇文档中,首先对标题“桌面型ExtJS4.2.1MVC+SpringMVC3.0.5注解开发实例补充说明”进行了详细的分析。标题中所包含的信息表明,本文主要涉及桌面型应用的开发实例,使用了ExtJS 4.2.1版本的模型-视图-控制器...

    spket1.6.23破解版+EXTjs4.2.1的JSB2文件

    spket1.6.23破解版和EXTjs4.2.1版本的JSB2文件 两个文件都有了。安装配置成功后,eclipse就可以使用代码自动提示了。

    桌面型ExtJS4.2.1MVC+SpringMVC3.0.5注解开发实例

    本实例为ExtJS4.2.1 MVC 和 SpringMVC3.0.5 基于注解模式下的开发实例,是桌面型的应用程序,包含全部需要的jar包,定义了项目的基于架构和实现,可在MyEclipse10打开和部署,对于有需要在该环境下进行开发的人员,...

Global site tag (gtag.js) - Google Analytics