关于extjs开发的方式

lich0079

浏览: 1233867 次
性别:
来自: 上海

最近访客更多访客>>

luowenyong6

wangyy

f51886

xjg9083

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Extjs

EXT 编程 JavaScript 项目管理 ASP.net

用ext做开发也有2，3个月了，都是公司的人自己摸索的，现在我们的开发方式是一个模块一个js文件，这样导致的结果就是展现逻辑和一些业务逻辑（主要是和向后台发信息和收信息后的处理之类的）混在一起，一个js文件几千行，极难维护，有点像早期的model1纯jsp开发，现在想的是能不能像model2一样，把所有的业务代码抽取成一个一个的方法放到一个js文件中，然后页面的代码放到另一个文件中，完全分开，但这样可能带来的一个可能的坏处是，有时业务代码是要访问上下文对象的，不知大家怎么看

分享到：

高科技就是好 | ext tree 动态右键菜单

2009-10-13 09:42
浏览 4757
评论(41)
论坛回复 / 浏览 (41 / 21659)
分类:Web前端
查看更多

41 楼 WalterRutter 2009-11-08

学习了，还没怎么搞懂extjs！

40 楼 walkman 2009-11-06

Ext好像有命名空间的概念吧，可以用命名空间好好管理自己的js文件或者类。楼主的几千行js代码把我吓到了

39 楼 asyura 2009-11-04

组件之间的通信，可以用事件来解决，这是看了陈老师的视频学的，感觉很不错。

38 楼 danjp 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可以存入数据库，进行动态加载。

37 楼 ssuupv 2009-10-21

封装EXT组件，最好不要直接用EXT开发。开发效率很低

36 楼 peak 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运行的速度要慢一些，不知道真假，不过这样写的代码确实要好看很多

35 楼 343101272 2009-10-16

不便评论，以后要研究研究

34 楼 mniz 2009-10-16

公司还找人不，让我去帮你写吧，嘿嘿

33 楼 clia 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的命名都比较规范好记了。

32 楼 realcbb 2009-10-15

刚用extjs做了一个项目,整体的感觉是js魅力无穷,跟强类型的java配合一起,非常舒服.
至于开发方式,我的看法跟大家差不多,首先要写好公共类,其他的OO就好了.
内存泄露是我一直在关注的问题,不过没有遇到过.

继续关注本贴.

31 楼冯冀川 2009-10-15

感觉EXTJS在目前主流浏览器上还是有性能问题

30 楼 andy_ghg 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中用过,感觉还不错~!

29 楼 andy_ghg 2009-10-14

xiao_Yao 写道

andy_ghg 写道

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

那样的话就更好了,能够统一的处理一些事情.

我最近一直在考虑一个问题,过多的封装势必会导致性能上的问题,这个问题一直困扰着我,封状的太严密不好,封装的不够严密有时候也不好,脑壳有点疼.....

28 楼 Aguo 2009-10-14

一个页面两个js，一个是显示的，一个业务的

27 楼 xiao_Yao 2009-10-14

andy_ghg 写道

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)还是什么可视化组件,前期学习都不要使用.

26 楼 kenken0y 2009-10-14

25 楼 mr.a 2009-10-14

单页面应用肯定会遇到内存泄漏的问题 , 伟库网每个功能模块都附着在一个html上面, 切换时刷新, 不会泄漏, 但是每个页面都要引用ext-all

24 楼 prothi 2009-10-14

geweixin 写道

我用EXT将近1年半了，我觉得EXT也可以类似JAVA一样的开发方式，每一个JS文件一个类，一个对象，
然后需要调用的时候，new 一下！！，我在开发中就是这么做的。。。

但是这样做法有一定问题，java文件一般运行在本地，但是js文件确是需要下载的，所以应该尽量减少JS文件的个数，不过思路可以和JAVA类似，只不过把JS的几个类放到一个大的JS文件中~这样对于速度是有益的

23 楼 andy_ghg 2009-10-14

我现在一般window的closeAction都是close(也就是默认);但是效果不是很明显,这玩意儿内存消耗确实厉害,但是有利有弊.单页面我没有出现过内存泄露的问题.....

22 楼 mr.a 2009-10-14

内存泄漏好像没有太好的解决方法, 我们现在的做法就是new完以后不销毁, 页面轮转的时候自定义一个方法来请求后台重新加数据和重新设置页面状态. 虽然页面都打开后比较占内存但是轮转时候速度会变快, 浏览器内存占用也不会无限增大.

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论