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...)

 

 

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

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

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

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

 

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

感觉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开发啊的，上手比较痛苦...(反正我当时学的时候，比较痛苦...)

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

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

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

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