资源描述:
《extjs开发编写代码的模板》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、EXTJS开发编写代码的模板zz开发EXTJS,首先要建立的就是组件化编程,你把一个form作为一个组件,也可以将半个页面都作为一个组件.当组件化编程之后你就要考虑分类别,分模块开发了,我认为,一个组件一个JS文件,多个组件拼接成一个模块,这些组件都放在一个文件夹下,命名方法其实很简单,类似java如:在App文件夹下的Scene文件夹内App.Scene.ScreenManager.jsExt.namespace("App.Scene.ScreenManager.XX","App.Scene.Scree
2、nManager.YY");App.Scene.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.
3、js//同上并且,切记,要把Extjs当做java来写,因此,你的程序只能有一个入口即只能允许整个程序中只出现一个Ext.onReady(function(){});很多人不信Extjs可以这样写,说只能应用在小型的项目中,但是我可以告诉你,这样的写法完全适用与大项目,而且是项目越大越能展现出他的好处我经历过刻骨铭心的失败总结出以下几点经验:1.绝不使用全局变量(如有必要,可以用静态方法来做)2.不能设置组件的(包括该组件下的小组件的)ID这个属性,(此组件的派生类你可以随意).3.稀奇古怪的代码少写,因
4、为你不能保证你的EXTJS版本永远停留在当前版本上(如果公司有钱买授权的话)4.能在后台完成的业务逻辑坚决不在前台做,即使在前台做看起来比较简单(如果前台坐起来非常简单就算了,例如验证)5.统一管理你的JSON生成.6.规范你的代码Ext.ns("App.Users.CURD");/***必要的注释一个不能少,Javascript代码维护起来没有java好维护....**/App.Users.CURD=Ext.extend(Ext.Panel,{//属性代码全部写在这里title:"CURD",//初始化
5、组件(如果你的组件需要改变样式或者需要动它的dom,你可以重写父类的onRender,并把部分视图代码放在onRender函数中)initComponent:function(){App.Users.CURD.superclass.initComponent.call(this,arguments);//先定义自定义事件(如果必要的话)//接着视图代码全部写在这里},//方法函数全部写在这里//先将与后台数据交互的函数写出来addUser:function(){//对应后台同名的Action方法函数},d
6、elUser:function(){//对应后台同名的Action方法函数},updateUser:function(){//对应后台同名的Action方法函数},//供自己内部使用的函数跟在后面formClear:function(){},//提供给外部调用的函数紧跟数据操作getSelectUsers:function(){return......}setXXXX:function(){},//最后就是事件处理函数,因为函数比较多,事件处理往往伴随着页面逻辑,放在后面比较好找....混在中间不太好找o
7、nSubmit:function(){},onDelet:function(){}});//*因为是基于UI的组件,因此一般都可以独立测试,测试通过后注释掉即可(注意我的注释写法)Ext.onReady(function(){//.........});//*/复用的类有时候你打算生成一个带有若干配置项(configoptions)的组件(component),这些配置项你会想是让它可复的。就好像一种情况,有一部分的面板是已经固定好高、宽的,其中只有标题是不同的,我们可以把它做成预配置类(preconfi
8、guredclass)。使用构造器函数构造器函数是完成该任务的方法之一,如下例://构造器函数varMyPanel=function(config){Ext.apply(this,{//在这里设定预配置的参数项 width:300,height:300});MyPanel.superclass.constructor.apply(this,arguments);};//MyPanel继承了Ext.PanelExt.extend