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