EXTJS开发编写代码的模板.doc

EXTJS开发编写代码的模板 zz开发EXTJS,首先要建立的就是组件化编程,你把一个form作为一个组件,也可以将半个页面都作为一个组件.当组件化编程之后你就要考虑分类别,分模块开发了,我认为,一个组件一个JS文件,多个组件拼接成一个模块,这些组件都放在一个文件夹下,命名方法其实很简单,类似java如:在App文件夹下的Scene文件夹内App.Scene.ScreenManager.jsEspace(App.Scene.ScreenManager.XX,App.Scene.ScreenManager.YY);App.Scene.ScreenControl.jsEspace(App.Scene. ScreenControl.XX,App.Scene. ScreenControl.YY);App.Scene.Main.jsEspace(App.Scene. Main.XX,App.Scene.Main.YY);在App文件夹下的Business文件夹内App.Business.CheckUser.js/同上App.Business.Logout.js/同上并且,切记,要把Extjs当做java来写,因此,你的程序只能有一个入口即只能允许整个程序中只出现一个Ext.onReady(function();很多人不信Extjs可以这样写,说只能应用在小型的项目中,但是我可以告诉你,这样的写法完全适用与大项目,而且是项目越大越能展现出他的好处我经历过刻骨铭心的失败总结出以下几点经验:1.绝不使用全局变量(如有必要,可以用静态方法来做)2.不能设置组件的(包括该组件下的小组件的)ID这个属性,(此组件的派生类你可以随意).3.稀奇古怪的代码少写,因为你不能保证你的EXTJS版本永远停留在当前版本上(如果公司有钱买授权的话)4.能在后台完成的业务逻辑坚决不在前台做,即使在前台做看起来比较简单(如果前台坐起来非常简单就算了,例如验证)5.统一管理你的JSON生成.6.规范你的代码Ext.ns(App.Users.CURD);/* 必要的注释一个不能少,Javascript代码维护起来没有java好维护.*/App.Users.CURD = Ext.extend(Ext.Panel,/属性代码全部写在这里title:CURD,/初始化组件(如果你的组件需要改变样式或者需要动它的dom,你可以重写父类的onRender,并把部分视图代码放在onRender函数中)initComponent:function()App.Users.CURD.superclass.initComponent.call(this,arguments);/先定义自定义事件(如果必要的话)/接着视图代码全部写在这里,/方法函数全部写在这里/先将与后台数据交互的函数写出来addUser : function() /对应后台同名的Action方法函数,delUser : function() /对应后台同名的Action方法函数,updateUser : function() /对应后台同名的Action方法函数,/供自己内部使用的函数跟在后面formClear : function() ,/提供给外部调用的函数紧跟数据操作getSelectUsers : function()return .setXXXX : function() ,/最后就是事件处理函数,因为函数比较多,事件处理往往伴随着页面逻辑,放在后面比较好找.混在中间不太好找onSubmit : function() ,onDelet : function() );/*因为是基于UI的组件,因此一般都可以独立测试,测试通过后注释掉即可(注意我的注释写法)Ext.onReady(function()/.);/*/复用的类有时候你打算生成一个带有若干配置项（config options）的组件（component），这些配置项你会想是让它可复的。就好像一种情况，有一部分的面板是已经固定好高、宽的，其中只有标题是不 同的，我们可以把它做成预配置类（preconfigured class）。使用构造器函数构造器函数是完成该任务的方法之一，如下例：/ 构造器函数varMyPanel =function(config)Ext.apply(this,/ 在这里设定预配置的参数项width:300,height:300);MyPanel.superclass.constructor.apply(this, arguments);/ My Panel继承了Ext.PanelExt.extend(MyPanel, Ext.Panel,);varmyfirstpanel =newMyPanel(title:My First Panel);varmysecondpanel =newMyPanel(title:My Second Panel);工厂模式生成“预配置对象”的一种途径是使用工厂模式（Factong Design Pattern）。透过工厂函数返回一个全新的实例（该函数包含了预先 配置好的参数项），工厂模式的方法不需要类的继承。 如果纯粹为了制定固定的配置项参数来讲工厂模式是一个不错的方法，其内部原理比继承、覆盖某个类来得简单。functioncreateMyPanel(config)returnnewExt.Panel(Ext.apply(/在这里设定预配置的参数项width:300,height:300, config);varmyfirstpanel = createMyPanel(title:My First Panel);varmysecondpanel = createMyPanel(title:My Second Panel);扩展功能使用OO的类的其中一个原因是你打算从另外一个类的基础上扩展新的功能，假设现在有一面板类，我们在此基础上增加一个新的方法并重写 （override）父类的一个方法，过程如下：/ ConstructorvarMyPanel =function(config)/这里复用配置项Ext.apply(this,width:300,height:300);/ 调用父类的构造函数，提取父类的功能MyPanel.superclass.constructor.apply(this, arguments);/ 在这里你可以为当前对象新添加功能/ 如事件：this.on(click,function()alert(You Clicked +this.title);,this);/ My Panel继承了Ext.PanelExt.extend(MyPanel, Ext.Panel,/ 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量/ 如果你不确定请在构造器内设定。不要在这里放置由new或xtype操作而成的对象。在构造器内设定配置项对象会更安全。/ 新添加的函数myNewFunction:function(),/ 重写原有函数onRender:function()MyPanel.superclass.onRender.apply(this, arguments);this.myNewFunction(););varmyfirstpanel =newMyPanel(title:My First Panel);varmysecondpanel =newMyPanel(title:My Second Panel);另一种方法是用构造器的方式写出代码：varMyPanel =function(config)/ 调用父类的构造函数，提取父类的功能MyPanel.superclass.constructor.call(this, Ext.apply(/这里复用配置项width:300,height:300, config);/ 位于构造器之后，在这里你可以为当前对象新添加功能（如处理如事件）this.on(click,function()alert(你已点击+this.title);,this);以上的方法是重写构造器的方式实现继承的，另外我们还可以重写initComponents方法写出相同的功能，但需要指出是initComponent方 法是属于Ext.Components的方法，只能在组件上使用，不是一个通用的方法。这里是一个示例：varMyPanel = Ext.extend(Ext.Panel,/ 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量/ 如果你不确定请在构造器内设定。不要在这里放置由new或xtype操作而成的对象。在构造器内设定配置项对象会更安全。initComponent:function()/Reusable config options hereExt.apply(this,width:300,height:300);/ 调用父类的构造函数，提取父类的功能MyPanel.superclass.initComponent.apply(this, arguments);/ 位于构造器之后，在这里你可以为当前对象新添加功能（如处理如事件）this.on(click,function()alert(你已点击+this.title);,this);,/ 新添加的函数myNewFunction:function(),/ 重写原有函数onRender:function()MyPanel.superclass.onRender.apply(this, arguments);this.myNewFunction(););你首先可能会观察到的是这儿没有构造函数。Ext会为你创建构造函数。这个构造函数有点不同，叫initComponent。这在高级教程和例子常见的使用方法。只要简单记住它做的事情与构造函数是差不多的。推荐在调用父类的构造器或initComponent方法之后，为当前对象新添加事件。MyPanel.superclass.constructor.apply(this, arguments);/ 位于构造器之后，在这里你可以为当前对象新添加功能（如处理如事件）this.on(