|
锁定老帖子 主题：关于extjs开发的方式
精华帖 (4) :: 良好帖 (1) :: 新手帖 (8) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-10-14
xiao_Yao 写道 andy_ghg 写道 我觉得,开发EXTJS,首先要建立的就是组件化编程,你把一个form作为一个组件,也可以将半个页面都作为一个组件.当组件化编程之后你就要考虑分类别,分模块开发了,
我认为,一个组件一个JS文件,多个组件拼接成一个模块,这些组件都放在一个文件夹下,命名方法其实很简单,类似java如: 在App文件夹下的Scene文件夹内 App.Scene.ScreenManager.js Ext.namespace("App.Scene.ScreenManager.XX","App.Scene.ScreenManager.YY"); App.Scene.ScreenControl.js Ext.namespace("App.Scene. ScreenControl.XX","App.Scene. ScreenControl.YY"); App.Scene.Main.js Ext.namespace("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,你可以重写父类的onReander,并把部分视图代码放在onReander函数中)
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(){
//.........
});
//*/
最后一句....无论是ASP.NET组件(Coolite)还是什么可视化组件,前期学习都不要使用. 我的写法这个这位的比较接近,但是我多写了一个含有公共方法的xxx.panel用来继承 也就是:App.Users.CURD = Ext.extend(Ext.Panel,{...})中 我用自己写的xxx.panel来代替Ext.Panel 那样的话就更好了,能够统一的处理一些事情. 我最近一直在考虑一个问题,过多的封装势必会导致性能上的问题,这个问题一直困扰着我,封状的太严密不好,封装的不够严密有时候也不好,脑壳有点疼..... |
| 返回顶楼 | |
|
发表时间：2009-10-14
kenken0y 写道 不知道为什么被投了7个新手帖,这个问题单纯来看不复杂,但是如果结合几个用户需求以后就没这么简单了,例如:根据用户的权限隐藏部分元素,保存用户对界面的设置(表格的排序方式,部分列隐藏,列宽度和位置)
js可以动态加载 http://www.extjs.com/forum/showthread.php?t=69465 runtime javascript loader class Ext.ensure({ js: ['../js/somejs.js', '../js/OtherjsFile.js'], callback: function() { var win = new Ext.ux.MyWindow({}); win.show(); }, scope: this }); js的结构可以参照nan21-ebs的做法,svn地址在http://nan21-ebs.googlecode.com/svn/trunk/ClientExtjs/src/ 动态加载JS我还没有在正式项目中用过....因为项目已经定型所以还没有机会去尝试,不过我在自己写的小Demo中用过,感觉还不错~! 
|
| 返回顶楼 | |
|
发表时间：2009-10-15
感觉EXTJS在目前主流浏览器上还是有性能问题
|
| 返回顶楼 | |
|
发表时间：2009-10-15
刚用extjs做了一个项目,整体的感觉是js魅力无穷,跟强类型的java配合一起,非常舒服.
至于开发方式,我的看法跟大家差不多,首先要写好公共类,其他的OO就好了. 内存泄露是我一直在关注的问题,不过没有遇到过. 继续关注本贴. |
| 返回顶楼 | |
|
发表时间：2009-10-15
最后修改：2009-10-15
我是自己搞了个动态装载的框架，然后所有代码都作了分离：
//DataView/user/select_multi.js
load('Store.user.manual');
tpl_dv_u = load_tpl('Template.dv.user');
SelectMultiUsersDataView = Ext.extend(Ext.DataView, {
multiSelect: true,
simpleSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: '该部门没有用户。',
listeners: {
"selectionchange": function(dv, sel) {
this.enableBubble("user_change");
this.fireEvent("user_change", dv.getSelectedRecords());
}
},
initComponent:function() {
Ext.apply(this, {
store: new ManualUsersStore(),
tpl: new Ext.XTemplate(tpl_dv_u),
end:0
});
SelectMultiUsersDataView.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});
Ext.reg('dv_u_sel_multi', SelectMultiUsersDataView);
类都是按照http://www.extjs.com/learn/Tutorial:Writing_a_Big_Application_in_Ext推荐的方式写的。 所有组件都可以拿来复用，只通过事件系统与外层组件或子元素进行通信。 统一命名规范，这样文件的命名和xtype的命名都比较规范好记了。 |
| 返回顶楼 | |
|
发表时间：2009-10-16
公司还找人不 ，让我去帮你写吧，嘿嘿
|
| 返回顶楼 | |
|
发表时间：2009-10-16
不便评论，以后要研究研究
|
| 返回顶楼 | |
|
发表时间：2009-10-19
andy_ghg 写道 我觉得,开发EXTJS,首先要建立的就是组件化编程,你把一个form作为一个组件,也可以将半个页面都作为一个组件.当组件化编程之后你就要考虑分类别,分模块开发了,
我认为,一个组件一个JS文件,多个组件拼接成一个模块,这些组件都放在一个文件夹下,命名方法其实很简单,类似java如: 在App文件夹下的Scene文件夹内 App.Scene.ScreenManager.js Ext.namespace("App.Scene.ScreenManager.XX","App.Scene.ScreenManager.YY"); App.Scene.ScreenControl.js Ext.namespace("App.Scene. ScreenControl.XX","App.Scene. ScreenControl.YY"); App.Scene.Main.js Ext.namespace("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(){
//.........
});
//*/
最后一句....无论是ASP.NET组件(Coolite)还是什么可视化组件,前期学习都不要使用. 跟我的想法很相似，呵呵，握握手，不过听说这样写的ext运行的速度要慢一些，不知道真假，不过这样写的代码确实要好看很多 |
| 返回顶楼 | |
|
发表时间：2009-10-21
最后修改：2009-10-21
封装EXT组件，最好不要直接用EXT开发。开发效率很低
|
| 返回顶楼 | |
|
发表时间：2009-10-21
jsvm+ext开发就可以非常简单解决一个入口和只导入一次ext包的问题，而且开发效率高。
var jsvm = _JSVM_Namespace.runtimeEnvironment.JSVM;
${pages};
var tr=jsvm.loadClass(pages).newInstance();//pages就相当于test.js的命名空间com.aa.test
tr.init();//每个js中的初始化方法
tr.element._pages=pages;
test.js代码：
com.aa.test=function(){
this.init()=function(){}
。。。
this.element= new Ext.ui.upanle({});//自定义的panel,当前页面的所有组件都在items
}
而这个pages可以存入数据库，进行动态加载。 |
| 返回顶楼 | |
