Extjs4.0开发笔记

Extjs4开发笔记（一）——准备工作本文内容已经重新更新，旧版请查看。重写原因：由于开始准备的时候，就是按照传统开发去做的，写了一部分之后，有网友和同事提出：“为什么不用MVC模式”呢？这样的问题让我对目前传统开发的心发生了一些细微变法，对啊，为什么不用MVC模式呢？我征求了一下同事及热心网友的意见，都同意使用MVC模式开发。从而，我删掉了原来所有目录，重新按照MVC模式去组织目录结构，很快的，目录结构准备好了。那。。我们重新来过，使用EXTJS4.0的MVC模式，开发这套员工管理系统。给个简称吧。SMS（你懂得。呵呵！）。一、建立环境：Data：数据库文件夹，里面放着管理系统用的数据库文件。数据库目前只有三张表。分别是：Menu：菜单项user：员工注册信息userinfo：员工个人资料信息Images：图片目录，一些自定义的图片文件Include：服务端文件目录，里面包含ASP所用到的Conn.asp、Function.asp等文件App：整个SMS所用到的自定义JS文件，里面有一个controller文件夹，一个view文件夹。controller文件夹放置主代码，view文件夹放置各组件。这几个文件夹中的内容会在第二章进行介绍。Extjs4：此目录放置Extjs4的库文件。Server：服务端目录，里面包含ASP服务端获取数据的各种.ASP文件。目前里面建立了一个叫MenuLoader.asp的文件，从名字上来看，这个文件是加载菜单使用。OK，今天就介绍到这里，明天，我们会从头开始发开基于Extjs4MVC模式的应用。Extjs4开发笔记(二)——框架的搭建头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的基础功能，由于使用的是Extjs4，所以我们一定要使用Extjs4动态加载功能。来动态加载这些文件。本文内容已经重新更新，旧版请查看：由于最近老出差，所以代码无法及时更新。导致近一周都没有更新。废话不多说了，上篇文章建立了比较基础的文件。今天开始搭建大体的框架，由于Extjs4在组件建立方面有了很大的改变，所以第一次建立的框架页面还是费了比较长的时间。本章内容增加了一些图片及CSS文件，目的是为了美化整个界面。增加的CSS文件：注意事项：layout、region的使用，如果没有看API及相关文档的话，那么面对错误对话框的时候，还不知道是怎么回事。本文将main.js放到了/app/controller文件夹下，这将是整个项目的主体文件。而头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的基础功能，之后我们会慢慢完善这些组件。而整个页面的填充，也使用一个JS文件来完成。也许有人会问，这么多文件，是不是要都在index.html中引入啊。这样想的话，就错了哦。因为我们使用的是Extjs4，所以我们一定要使用Extjs4动态加载功能。先来看下自定义CSS（sytle.css）：1.#header{background:#7F99BEurl(/images/layout-browser-hd-bg.gif)repeat-xcenter;}2.#headerh1{font-size:16px;color:#fff;padding:3px10px;font-family:微软雅黑,黑体}3.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.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/5.title员工管理系统/title6.linkrel=stylesheettype=text/csshref=extjs4/resources/css/ext-all.css/7.!--引入自定义CSS--8.linkrel=stylesheettype=text/csshref=extjs4/resources/style.css/9.scripttype=text/javascriptsrc=extjs4/ext-all-debug.js/script10.scripttype=text/javascriptsrc=app.js/script11./head12.13.body14./body15./htmlApp.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动态加载机制，请参考：：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:3010.});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:'00-11',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:false20.});21.this.callParent(arguments);22.}23.})TreePanel并没有加载菜单项，关于Extjs4Tree，我们后面会介绍。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:1010.},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,'-'