Ext JS开发实用工具总结

    现在一直在做Ext Gwt开发，已经很久有没接触Ext JS了，之前接触过的东西已经快忘干净了，在完全遗忘之前，写此总结以备参考，也希望多大家有用。

 

1. Ext JS IDE工具:

       在这里只说我接触过的工具:

       1). Aptana Studio:   http://www.aptana.com/     [基于Eclipse3.3 或者以上, 开源]

            这个是我现阶段接触到得，最好的Web前端开发工具，不仅有强大的代码提示(浏览器兼容性也会提示出来)，而且支持js断点调试。 现在最新的版本是2.0, 里面可以直接更新Ext2.2插件，用来做ExtJS开发，非常方便:

 

强大的代码提示,并且支持断点调试:

 

 

       2). Spket IDE:  http://www.spket.com/

                这个也非常优秀，在Aptana Studio未免费之前，用过这个。 开发Ext JS需要进行一定的配置，代码提示功能也很强大，不过不支持浏览器兼容性提示和断掉调试(我接触的是1.6版，之后的版本就不清楚了)

 

2. 浏览器调试，以及辅助工具: (一下都是FireFox插件)

         1). FireDebug:  做前端开发必备， js断点调试，dom节点查看， Css样式调整必备； 不仅如此，而能能够检测网络加载状况，以及请求响应信息;

          2). Web Developer: 主要偏向于Web制作. 平时用的不多;

          3). iMaros for firefox: 一款不错的测试工具，如果不想用LoadRunner这些庞大的测试工具，可以尝试用用他。

          4). Library Detector: 查看当前网页用了哪些js框架；  PS: 这个比较猥琐，头别人的解决方案，木哈哈哈....

 

下面副现在用的插件:

 

 

3. 资料整理:

 

Spket + Ext JS 开发环境搭建(入门的时候就看的他..)

 

Ajax性能工具 (IBM的文章库， 介绍了很多不错的ajax测试工具，服务器端和客户端的都有。。)

 

围绕Ext2.0的开发工具(这个是老帖了，我是从这里了解到得Aptana Studio)

 

继续更新一些资料:(都来自verycd)

 

《浪曦的ExtJS视频教程》  (主要介绍ExtJS中 Grid的应用)

 

DojoChina的ExtJS视频教程  (我当时就看的这个轿车呢个，如果看完这个还不会extjs的话，我就无语了....   后台他们用的是Asp + JScript...)

 

 

评论

15 楼 witcheryne 2010-06-29  

懒萝卜 写道

Aptana Studio工具虽然做的不错，但是不好用。
因为它经常会导致Eclipse莫名其妙的退出，这个是我最不能忍受，其它的偶尔弹出个出错提示框还没有什么。

我用的是
eclipse 3.4 + aptana studio 2.02
  没碰到过你那种问题... 很多朋友都在用， 也没见谁提过...

14 楼 懒萝卜 2010-06-29  

Aptana Studio工具虽然做的不错，但是不好用。
因为它经常会导致Eclipse莫名其妙的退出，这个是我最不能忍受，其它的偶尔弹出个出错提示框还没有什么。

13 楼 witcheryne 2010-03-11  

wv1124 写道

不知道你说的这Aptana Studio有没有VS2008中代的js调试工具好用？我一直在用VS2008中的调试的JS代码！

VS2008 没用过，做不了评论。。。
你可以试试Aptana Studio ...  VS里面应该不会对 Ext JS有代码 和 浏览器兼容性提示吧...

12 楼 witcheryne 2010-03-11  

wiwiluo 写道

Aptana实在是太耗内存，无奈卸载了。
另外现在写ext基本上都直接在MyEclipse里写了，写习惯了感觉也没啥。

Aptana 基于Eclipse ...
可以以插件的形式装到MyEclipse 下...

MyEclipse 6.0(eclipse3.3) 以上版本基本都没问题....

11 楼 wiwiluo 2010-02-06  

Aptana实在是太耗内存，无奈卸载了。
另外现在写ext基本上都直接在MyEclipse里写了，写习惯了感觉也没啥。

10 楼 wv1124 2010-02-03  

不知道你说的这Aptana Studio有没有VS2008中代的js调试工具好用？我一直在用VS2008中的调试的JS代码！

9 楼 zy_pub 2010-02-03  

Rooock 写道

一直没有接触过GWT. 不知道LZ可否对照EXTJS介绍哈.

PS...这帖水平真不咋的. LZ还有藏着掖着的绝学快使出来吧~

8 楼 matychen 2010-02-03  

Web Developer: 主要偏向于Web制作. 平时用的不多;
这个工具我喜欢

7 楼 witcheryne 2010-02-03  

s海若 写道

。。。
测试工具除了iMaros强力推荐Seleinum，可以录制，也支持测试代码。主要测试代码可以转换成xml,java等各种形式，更有强大的api可以集成到测试框架里，非常方便。
。。。

恩~ 看了一下Selenium，感觉的确不错，有空研究研究...
这个文章有介绍
http://www.iteye.com/topic/107276
java.net + XPath 弓虽大！

6 楼 witcheryne 2010-02-03  

dieslrae 写道

不知道GWT和之前看到的封装ext的jsf标签谁更有优势

JSF封装的，有个OperaMask,金蝶在做.. 金蝶自己维护这套东西。。。

不管什么优势，只有自己用了才知道...
具体用什么，主要看自己的项目和人员配置...
时间紧的话就用自己最容易上手的东西。只要存在，就有他存在的道理，实践才是王道(^_^)

5 楼 witcheryne 2010-02-03  

Rooock 写道

一直没有接触过GWT. 不知道LZ可否对照EXTJS介绍哈.

PS...这帖水平真不咋的. LZ还有藏着掖着的绝学快使出来吧~

呵呵·· 的确写的有点简单， 检讨一下....

感觉GWT现在已经比较成熟了， Google Wave好像就是用GWT做的， 我在wave的html页面中，看到有对gwt的引用....


关于Ext JS和Ext Gwt对照，改天可以专门开个贴总结一下。。。
GWT:主要的优势就在，可以以写java的方式来写ajax应用。

public class AppContainer extends ContentPanel{
	
	private HtmlContainer north = null;
	
	private AppCenterContainer center = null;
	private AppNavigatePanel west = null;
	private ContentPanel east = null;	
	
	private BorderLayout borderLayout = null;
	
	private BorderLayoutData centerData = null;
	private BorderLayoutData westData = null;	
	private BorderLayoutData eastData = null;	
	private BorderLayoutData northData = null;
	
	public AppContainer() {				
		
		west = new AppNavigatePanel();	
		center = new AppCenterContainer ();
		east = new RundownPanel();
		
		borderLayout = new BorderLayout();
		north = new HtmlContainer();
		
		AppLayout.registeBorderLayout(this.getClass(), borderLayout);		
		
		
		
		westData = new BorderLayoutData(LayoutRegion.WEST, 200, 180, 300);		
		westData.setMargins(new Margins(0, 0, 0, 0));
		westData.setCollapsible(true);
		
		eastData = new BorderLayoutData(LayoutRegion.EAST, 600, 200, 900);
		eastData.setMargins(new Margins(0, 0, 0, 0));
		eastData.setCollapsible(true);
		
		centerData = new BorderLayoutData(LayoutRegion.CENTER);
		centerData.setMargins(new Margins(0, 5, 0, 5));						
		
		northData = new BorderLayoutData(LayoutRegion.NORTH, 55, 55, 55);
		northData.setMargins(new Margins(0, 0, 1, 0));
		northData.setCollapsible(false);
		northData.setSplit(false);
	}


	@Override
	protected void onRender(Element parent, int index) {
		super.onRender(parent, index);		
		
		north.setUrl("../header.html");
		
		this.setLayout(borderLayout);
		this.setBorders(false);
		this.setBodyBorder(false);
		
		// add borderlayout panel
		this.add(center, centerData);
		this.add(west, westData);		
		this.add(east, eastData);				
//		this.add(north, northData);
	}	
}

做前端开发，感觉很像是在用Swing... 上手很快.

ExtJS: 这个优点到处都有介绍，我用的不多，就是觉得他的资源很多，官方支持非常迅速。  缺点就是上手难度有点大。对于很少接触javascript开发啊的，上手比较痛苦...(反正我当时学的时候，比较痛苦...)

4 楼 tigerlchen 2010-02-03  

<div class="quote_title">witcheryne 写道</div>
<div class="quote_div">
<p>    现在一直在做Ext Gwt开发，已经很久有没接触Ext JS了，之前接触过的东西已经快忘干净了，在完全遗忘之前，写此总结以备参考，也希望多大家有用。</p>
<p> </p>
<p>1. Ext JS IDE工具:</p>
<p>       在这里只说我接触过的工具:</p>
<p>       1). Aptana Studio:   <a href="http://www.aptana.com/">http://www.aptana.com/</a>     [基于Eclipse3.3 或者以上, 开源]</p>
<p>            这个是我现阶段接触到得，最好的Web前端开发工具，不仅有强大的代码提示(浏览器兼容性也会提示出来)，而且支持js断点调试。 现在最新的版本是2.0, 里面可以直接更新Ext2.2插件，用来做ExtJS开发，非常方便:</p>
<p> </p>
<p>强大的代码提示,并且支持断点调试:</p>
<p><br><img src="http://dl.iteye.com/upload/attachment/201579/c8af5a46-16af-3cb0-ad37-e17e6c355e1d.jpg" alt=""></p>
<p> </p>
<p> </p>
<p>       2). Spket IDE:  <a href="http://www.spket.com/">http://www.spket.com/</a></p>
<p>                这个也非常优秀，在Aptana Studio未免费之前，用过这个。 开发Ext JS需要进行一定的配置，代码提示功能也很强大，不过不支持浏览器兼容性提示和断掉调试(我接触的是1.6版，之后的版本就不清楚了)</p>
<p> </p>
<p>2. 浏览器调试，以及辅助工具: (一下都是FireFox插件)</p>
<p>         1). FireDebug:  做前端开发必备， js断点调试，dom节点查看， Css样式调整必备； 不仅如此，而能能够检测网络加载状况，以及请求响应信息;</p>
<p>          2). Web Developer: 主要偏向于Web制作. 平时用的不多;</p>
<p>          3). iMaros for firefox: 一款不错的测试工具，如果不想用LoadRunner这些庞大的测试工具，可以尝试用用他。</p>
<p>          4). Library Detector: 查看当前网页用了哪些js框架；  PS: 这个比较猥琐，头别人的解决方案，木哈哈哈....</p>
<p> </p>
<p>下面副现在用的插件:</p>
<p><br><img src="http://dl.iteye.com/upload/attachment/201597/f6001b41-f94e-3400-af1a-2e29d55ed401.jpg" alt=""></p>
<p> </p>
<p> </p>
<p>3. 资料整理:</p>
<p> </p>
<p><a href="http://www.cnblogs.com/haoliansheng/archive/2009/05/15/1457605.html"><span style="font-size: medium;">Spket + Ext JS 开发环境搭建</span></a></p>
<p> </p>
<p><a href="http://www.ibm.com/developerworks/cn/web/wa-aj-pertools.html"><span style="font-size: medium;">Ajax性能工具</span></a></p>
<p> </p>
<p><span style="font-size: medium;"><a href="/topic/161161">围绕Ext2.0的开发工具</a>(这个是老帖了，我是从这里了解到得Aptana Studio)</span></p>
<p> </p>
<p> </p>
</div>
<p> </p>

3 楼 s海若 2010-02-03  

其实说到底最好用的工具就是API DOC了，如果非要整个IDE aptana是首选，Spket感觉不是很成熟，而且免费得很不厚道。
测试工具除了iMaros强力推荐Seleinum，可以录制，也支持测试代码。主要测试代码可以转换成xml,java等各种形式，更有强大的api可以集成到测试框架里，非常方便。
问题是Ext gen出来的html结构很复杂，而且是动态id，所以gird里面的操作是录制不了的，而用纯粹的css selector有些功能，比如修改grid第三行中的某列记录实现起来很困难。
在此抛砖引玉，不知哪位达人有高招可以解决这个难题？

2 楼 dieslrae 2010-02-03  

不知道GWT和之前看到的封装ext的jsf标签谁更有优势

1 楼 Rooock 2010-02-02  

一直没有接触过GWT. 不知道LZ可否对照EXTJS介绍哈.

PS...这帖水平真不咋的. LZ还有藏着掖着的绝学快使出来吧~