http://www.cnblogs.com/beginor/archive/2008/12/14/1354922.html

不知不觉2008已经走到了尽å¤ß_¼Œåœ¨è¿™˜q‘一òq´ä¸­åQŒä¸€ç›´ä¸æ–­çš„ž®è¯•ç”¨ExtJS做项目，ä»?.1到现在的2.2åQŒåƒäº†ä¸ž®‘苦å¤ß_¼Œä¹Ÿæœ‰ä¸å°‘收获åQŒæ€È»“一下，一起分享！

1. ExtJS的定位是RIAåQŒå’ŒPrototype、jQuery½{‰ç±»åº“的定位不同。ä‹É用ExtJS做开发，ž®±æ˜¯æ„å‘³ç€ä»¥å®¢æˆïL«¯å¼€å‘äؓ主，不然ž®×ƒ¸å«RIA框架了，而Prototype、jQuery½{‰åªæ˜¯è¾…助性的客户端框æžÓž¼Œå’ŒExtJS不在同一条è“v跑先上。如果一定要和其它的框架做比较的话，应该å’?a target="_blank">Isomorphic SmartClientã€?a target="_blank">Backbase Enterprise Ajax之类的框架做比较åQŒå½“ç„Óž¼Œå’Œä»–们相比，ExtJS˜q˜æ˜¯æœ‰å¾ˆå¤§çš„优势的ã€?/p>

2. 使用ExtJSæ—‰™œ€è¦è§£å†›_¦‚何服务端通信的问é¢?/strong>。由于ExtJS只是一个客æˆïL«¯çš„框æžÓž¼Œå’ŒæœåŠ¡ç«¯æŠ€æœ¯æ²¡æœ‰å…³¾p»ï¼Œä¹Ÿå°±æ²¡æœ‰ç›¸åº”的服务端的适配层，因此客户端如果要用ExtJSåQŒåˆ™å¿…须提供它需要的数据¾l“构。ExtJS主要通过˜q™å‡ ¿Uæ–¹å¼å’ŒæœåŠ¡ç«¯è¿›è¡Œé€šä¿¡åQ?

• Ext.Ajax.request 做普通的异步è¯äh±‚åQŒæœåŠ¡ç«¯å¯ä»¥æ ÒŽ®å®žé™…情况˜q”回JSON形式数据或者HTML片段åQ?
• Ext.tree.TreeLoader 加蝲树åÅž¾l“æž„åQŒæœåŠ¡ç«¯å¿…é¡»˜q”回JSON形式数据åQŒè€Œä¸”要符合Ext.tree.TreeNode的配¾|®è¦æ±‚，否则自己做è{换；
• Ext.data.Store及其‹z„¡”Ÿ¾c?/strong> 加蝲表格形式的数据，服务端可以根据实际情况返回JSON形式数据或者XML形式数据åQŒå¦‚果没有特ŒDŠè¦æ±‚，推荐˜q”回JSON格式的数据；
• Ext.Element.update 局部更斎ͼŒ˜q™ä¸ªæ–ÒŽ³•æœ€æ€»è¿˜æ˜¯è¦è°ƒç”¨Ext.Ajax.requestæ–ÒŽ³•åQŒä¹‹æ‰€ä»¥æŠŠå®ƒå•ç‹¬åˆ—出来åQŒæ˜¯å› äØ“˜q™ç§æ–¹å¼æ¯”较å®ÒŽ˜“被忽视，但是在某些情况下˜q˜æ˜¯æŒ? 有用的，比如调用Ext.Panel.body.update()å¯ÒŽŸä¸ªExt.Panel的内容进行局部更斎ͼŒå¦‚果使用˜q™ç§æ–¹å¼åQŒé‚£ä¹ˆæœåŠ¡ç«¯åªèƒ½ç›¸åº”çš? ˜q”回HTML片段了；

3. 使用ExtJS时的注意事项。ExtJS和其它的辅助性类åº?Prototype、jQuery½{?相比昑־—非常庞大åQŒè®©å¾ˆå¤šå¾ˆå¤šåˆå­¦è€…望而却步。经˜q‡è¿‘一òq´çš„学和用，对于ExtJSçš„ä‹É用，我æ€È»“了一下几个注意事™å¹ï¼š

• ž®½é‡ä½¿ç”¨ExtJSçš„æ–¹­a€ã€? ExtJS提供了很多有用的æ–ÒŽ³•åQŒè§£å†›_®¢æˆïL«¯JavaScript常见的开发ä“Q务，常见的有查询HTMLDomåQŒåˆ›å»ºHTML元素åQŒäØ“HTML元素注册事äšg响应函数½{‰ï¼Œ˜q™äº›å¤§å¯ä»¥å…¨éƒ¨ä‹É用ExtJS提供的方法，使自å·×ƒ»£ç æž„å»ÞZ¸ŽExtJS之上åQŒä‹D几个例子åQ?
  • 查询ID为containerçš„DIV下所有的checkboxåQŒå¯ä»¥ä‹É用：Ext.fly(‘container’).select(‘input[type=checkbox]’);
  • 在ID为containerçš„DIV内创å»ÞZ¸€ä¸ªæŒ‰é’®ï¼Œå¯ä»¥ä½¿ç”¨åQ?span style="font-family: Courier New; color: #ff8000">Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
  • 为ID为containerçš„DIVçš„click事äšg注册处理函数åQŒä‹É用：Ext.fly(‘container’).on(‘click’, handlerFn, scope);
• ExtJS的自定义事äšg很好ç”?/strong>åQŒå¯ä»¥å®žçŽîC¸€å¯¹å¤šçš„通知åQŒè€Œä¸”ä»ÖM½•è‡ªå®šä¹‰äº‹ä»‰™ƒ½å¯ä»¥ä¸­é€”停止，只要有一个处理函数返回falseã€?
• Store合åƈ成一个文ä»?/strong> 用ExtJS昄¡¤ºæ•°æ®åQŒè‡ªç„¶å°±éœ€è¦ç”¨åˆ°Ext.data.Store及其‹z„¡”Ÿå‡ºæ¥çš„ç±»åQŒå¯ä»¥è€ƒè™‘所有的Store合åƈåˆîC¸€ä¸ªæ–‡ä»Óž¼Œ˜q™æ ·å¯šw‡ç”¨æœ‰å¾ˆå¤§çš„帮助ã€?
• 脚本文äšg½Ž¡ç† ž®½å¯èƒ½çš„每个模块做成一个类åQŒä¸€ä¸ªç±»ä¸€ä¸ªæ–‡ä»Óž¼Œ¾cÖM¼¼ä¸ŽJava或C# 的文件处理方法，每个文äšg注明其作用，依赖的文件等åQŒå¦‚果太多的话可以考虑写一个配¾|®æ–‡ä»Óž¼Œé€šè¿‡è¯»é…¾|®æ–‡ä»¶æ¥è¾“出脚本到客æˆïL«¯ã€?
• 调试和部¾|²åˆ†åˆ«åŠ è½½Debugå’ŒRelease版本的脚æœ?/strong> ExtJS附带的例子中没有使用完整Debug版本的例子，所以很多äh找不到完整的Debug版本的引用顺序，通过对Sourceæ–‡äšg夹下的ext.jsbæ–‡äšg˜q›è¡Œåˆ†æžåQŒå°±å¯ä»¥å¾—到正确的加载顺序，如下åQ?
  • Debug
    1. /ext-path/source/core/ext.js
    2. /ext-path/source/adapter/ext-base.js
    3. /ext-path/ext-all-debug.js
  • Release
    1. /ext-path/adapter/ext/ext-base.js
    2. /ext-path/ext-all.js
• 对Script˜q›è¡ŒåŽ‹ç¾ƒ 寚w¡¹ç›®ä¸­æœ‰å¤§é‡çš„JavaScript的话åQŒå¯¹å…¶è¿›è¡ŒåŽ‹¾~©æ˜¯å¾ˆæœ‰å¿…要的，˜q™é‡Œæˆ‘推荐的是ExtJS的论坛提供的JS BuilderåQŒå¯ä»¥é€šè¿‡é…ç½®æ–‡äšg来对Scriptå’ŒCSS˜q›è¡ŒåŽ‹ç¾ƒåQŒæ®è¯´ExtJSž®±æ˜¯ç”¨è¿™ä¸ªå·¥å…¯‚¿›è¡ŒåŽ‹¾~©çš„åQŒä¸˜q‡æœ‰ä¸€ä¸ªç¼ºç‚¹ï¼Œž®±æ˜¯ä¸æ”¯æŒUTF-8¾~–码ã€?/li>

 

4. ExtJS的优点和¾~ºç‚¹æ€È»“。经˜q‡è¿‘一òq´çš„ž®è¯•åQŒExtJS的优¾~ºç‚¹æ€È»“如下åQ?

• 优点
  • 一致的¾cÕdº“ ˜q™ç‚¹åœ?.1版本时还不是很完善，但是åˆîCº†2.0以后åQŒExtJS内部¾lè¿‡äº†ç¿»å¤©è¦†åœ°çš„变化åQŒç‰¹åˆ«æ˜¯UI¾l„äšgåQŒæœ‰¾lŸä¸€çš„基¾c»ï¼Œ¾l™äh的感觉很像是一个运行在‹¹è§ˆå™¨ä¸Šçš„运行时框架åQŒè¿™ä¸€ç‚¹åªæœ‰åœ¨å¯¹ExtJS熟练了之后才能体会到ã€?
  •  æ‰˜ç®¡™åµé¢å‘ˆçŽ° ExtJS在发展到2.0之后åQŒä¸ä»…UI¾cÕdº“一致了åQŒè€Œä¸”渲染方式也是¾lŸä¸€çš„，用官方的话说åQŒæ˜¯Managed RenderingåQŒè¿™ä¸€ç‚¹ä‹Éå¾—UI的扩展也比较一è‡ß_¼Œæœ‰åˆ©äºŽä»¥åŽçš„¾l´æŠ¤ä¸Žå‘展ã€?
  • 相对丰富的文档和½CÞZ¾‹ 毫无疑问åQŒåˆšåˆšæŽ¥è§¦åˆ°ExtJSçš„äh多数都是被它附带的例子和开发文档吸引过åŽÈš„åQŒå®ƒçš„文档做的确实不错ã€?
  • 华丽而成熟的界面 ExtJSåœ?.0之后的界面真的是没得è¯ß_¼Œä¸ä»…华丽åQŒè€Œä¸”相对很成熟ã€?/li>
• ¾~ºç‚¹
  • 没有合适的开发利å™?/strong> 毫无疑问åQŒä¸€ä¸ªå¥½çš„开发工具可以大大的提高¾~–码的速度åQŒä½†æ˜¯å¯¹äºŽExtJSåQŒå§‹¾lˆæ²¡æœ‰ä¸€ä¸ªå®Œ¾ŸŽçš„开发工å…øP¼Œå¯ä»¥æŽ¨èçš„有Aptana StudioåQ?Spket IDEåQŒå’ŒSpket 提供的提½Cºæ–‡ä»?/a>åQŒä½†æ˜¯éƒ½æ˜¯å„有优¾~ºç‚¹åQŒéƒ½ä¸å®Œ¾ŸŽï¼Œåªèƒ½ä¸€è¾¹çœ‹SDK一边写代码ã€?
  • 没有界面设计工具 虽然有äh提供了一ä¸?a target="_blank">在线的界面设计工å…?/a>åQŒä½†æ˜¯å’ŒVisual Studio提供的ASP.Net设计工具来说åQŒçœŸçš„可以说是天壤之别。因此，只能一辚w¢„览，一边写代码ã€?
  • 文档不全 虽然ExtJS提供的文档很丰富åQŒä½†æ˜¯è¿˜æ˜¯è·Ÿä¸ä¸Šæºä»£ç çš„更新速度åQŒæ‰€ä»¥ï¼Œ¾lå¸¸è¦é€šè¿‡çœ‹æºä»£ç åQŒè°ƒè¯•æ‰èƒ½çœŸæ­£è§£å†³é—®é¢˜ã€?
  • 不能¾~–译 ˜q™ä¸€ç‚¹å¯ä»¥è¯´æ˜¯JavaScript的缺点（如果能编译，ž®×ƒ¸å«JavaScript了）åQŒåœ¨å®žé™…的开发中åQŒç»å¸æ€¼šæ•²é”™ä¸€äº›ä»£ç ï¼Œæ¯”如大小写错误等åQŒä¸èƒ½é€šè¿‡¾~–译得到反馈åQŒåªèƒ½åœ¨˜qè¡Œæ—¶æŽ’错，å¯ÆD‡´å¼€å‘的效率比较低下ã€?/li>

5. 使用ExtJS做应用的一些徏è®?/strong>。多æ•îCh认äØ“ExtJS的脚本体¿U¯å¾ˆå¤§ï¼Œä¸é€‚合攑ֈ°äº’联¾|‘上åQŒå¯¹äºŽè¿™ä¸€ç‚¹ï¼Œæœ‰å¦‚下徏议：

1. 部çÖvåˆîCº’联网上的Web应用一定要加蝲Release版本的ExtJS
2. 可以考虑只加载必™åȝš„¾l„äšgåQŒbuild目录下脚本文仉™ƒ½æ˜¯åŽ‹¾~©è¿‡çš„，如果™å¹ç›®ä¸­ç”¨åˆ°çš„ExtJS的组件不是很多，可以只加载用到的
3. 考虑使用IIS的文件压¾~©åŠŸèƒ?
4. 使用Googleçš„GearsåQŒæŠŠæ‰€æœ‰çš„静态文件做客户端缓å­?
5. 使用ADOBEçš„AIRåQŒæŠŠè„šæœ¬æ‰“包到客æˆïL«¯˜qè¡Œ

 

æ€Èš„来说åQŒExtJS是一个不错的框架åQŒå®ƒé™ªä¼´æˆ‘èµ°˜q‡äº†¾_‘Ö½©çš?008åQŒä¹Ÿè®¸åœ¨æœªæ¥çš?009åQŒæˆ‘会è{向其它的RIA技术，但是我至ž®‘会¾l§ç®‹å…Ïx³¨ExtJSåQŒåŒæ—¶ä¹Ÿå¸Œæœ›˜q™ä¸ªæ¡†æž¶èƒ½å¤Ÿ™å½å¼ºçš„生存下厅R€?/p>

PSåQŒå…±äº«ä¸€äº›å­¦ä¹ èµ„料：

• ExtJS 2.0 ½Ž€ä»?/a> åQˆæŽ¨èåå¤é˜…读，¾l†ç»†ä½“会åQ?
• ExtJS的用æˆäh‰©å±•åˆé›?/a> åQˆæŽ¨èå¸¸åŽÈœ‹çœ‹ï¼‰
• 如何用ExtJS构徏大型应用 åQˆå¯ä»¥è¯´æ˜¯åšExtJS开发的指导思想åQ?
• ExtJS 2.0 ¾cÕdº“çš„è„‘å›?/a> åQˆå¯ä»¥åŠ æ·±å¯¹ExtJS¾cÕdº“çš„ç‘ô承关¾pȝš„理解åQ?/li>