zhangxin09的专栏

JSBuilder2 （extjs.com/products/jsbuilder）是配合 Ext JS 3 新发布的源码打包工具，用 Java 语言编写，打包编译成 JAR 格式执行文件发布到程序员手中。作为一个辅助开发者的打包工具，它内含有几种开源项目在内，包括 Rhino Project（著名的JavaScript编译器）、YUI Compressor（对 JS/CSS 压缩实行 Minification、混淆 Obfuscation）和 Java 环境下 JSON 的编码器

Env命名空间提供浏览器和操作的相关信息，还有告诉我们现代浏览器提供了什么功能。Ext.env.Browser该类提供了全部浏览器的元信息（名称、引擎、版本、是否 Strict 模式等等） ，用于全局对象 Ext。Ext.env.FeatureDetector这是一个在 Ext3 中没有类，完全新的功能，其功能在于检测浏览器特性如何，主要针对现代 HTML5 和 C

http://www.sencha.com/blog/sencha-touch-2-what-to-expect/作者：Aditya Bansod译者：Sp42（zhangxin09）今天，我们提前为大家介绍一下 Sencha Touch  2.0的新功能

Buffering large datasets in an Ext JS 4.2 Grid for high performanceSencha Ext JS includes rich grids that allow you to render virtually any size of dataset quickly in many browsers. In this de

原文：http://docs.sencha.com/ext-js/4-0/#!/guide/component翻译：frank/sp42 转载请保留本页信息ExtJS 程序由不同的器件所组成，器件也称作“组件”。所有组件皆是 Ext.Component 其子类，目的在于能够参与生存周期的自动化管理，包括实例化、渲染、大小调整与定位、销毁的问题。ExtJS不但直接提供了一个广阔且实用的组

接上文ProxyExt.data.Proxy 是一个十分关键的数据通讯类。Proxy 直译“代理”，可数据怎么能够代理？有点不通！Proxy 到底指的是什么意思呢？依小弟浅见，定义 Proxy 就是定义数据源，至少 Ext 中 AjaxProxy/ScriptProxy/LocalProxy/SessionProxy 表现如此。当 Store 要为Ext.data.Model4 加

转载请注明出处Ext中文网（http://www.ajaxjs.com）。ExtJS 3.3的下一个版本就是4.0。——什么！？您不知道？那就让我们为你展开新一段的 Ext 之旅吧！一、渲染组件的方式话说 ExtJS Roadmap（新版本线路图）其中重要的一项就是“Rearchitected component rendering system - smaller, faster a

Ted 谈 ExtJS 4.1 入门First Thoughts Learning Ext JS 4.1 January 17, 2012 | Ted Patrickhttp://www.sencha.com/blog/first-thoughts-on-ext-js/翻译： Ext 中文网 ajaxjs.com / sp42 转载请保留本页信息作为学习 Sench

上次的资料中我们跟大家介绍了Ext JS 4 的类机制大概如何，主要围绕传统 OO 机制而设计，从而打算弥补了 Prototype 继承的不足。虽然性质上仍为模拟手段，但包含了比旧版本更为完整的 OO 特征。Ext JS 4（连同 Ext Core）提供的新功能有：继承方面用 Ext.defined 代替了原来 Ext.extend 的写法。自动计算依赖关系及动态类加载。多态静态成员为配置

转载请注明出处Ext中文网 （http://ajaxjs.com）。Ext JS 4最强大的机能之一就是将模型的关系映射链接到一起。在 Ext 4 数据模型中，这种链接关系是通过关联操作(associations)来完成的。在应用中定义不同物件的关系是非常自然的。比如说，在一个食谱数据库中，一条食谱可能会有多条评论，多条评论又可能为同一作者所写，而作者又可以创造多条食谱。透过定义这种链接关系可

大家知道Ext文档那些弄得很漂亮的HTML。翻译的工作完毕后，接着的任务转便是换为发布的格式。这次可选的格式除了一贯以往的Adobe AIR外，还有传统格式CHM。首先说说将HTML转换单一文件的CHM。（后来Jacky提醒：不一定偏执于CHM；直接*.html大家也会领情）制作CHM可不是一件轻松的事情，至少我转换的过程中遇到不少的难题。首先是非官方的生成软件一概不成（推荐Easy CHM）

焕然一新的Store/Proxy 转载请注明出处Ext中文网 （http://www.ajaxjs.com 。上期讲到，Ext JS4 可以允许我们定义业务模型之间的关系（Association），在浏览器客户端就可以描述我们的业务模型如何，甚至灵活调用域对象（Domain Object）也不是一件难事。可是如果没用实体数据，业务模型也只是“空壳”，缺了内容也不存在什么“UI 数据绑定”一

Data 部分已经与 Sencha 工作人员确认，Sencha 的和 Ext JS 都是同一设计的 Data，包括模型、关联等的新内容 Ext JS 4都有，也就是说，现在 SenchaTouch 的 Data 就是将来 Ext JS 的 Data。

在我们初步了解完“类机制”的内容后，我们接着要揭开的将是于Ext JS 4中同样也是完全崭新的一项功能：动态加载（Dynamic Loading）。长久以来，包括前期ExtJS的各个版本中，尽管允许裁剪，不过通常使用之前它一定要加载整个框架。好像创建一个普通的Ext.Window，得必须下载整份的ext-all.js源文件，否则不能工作。Ext JS 4的动态加载便是围绕这个技术难点而考虑推出的。

我们很高兴能分享我们的最新的Ext JS图形设计版本——设计师（Designer）。这个新版本增加了许多新功能，以提高您创建应用程序设计的效率。一旦你习惯使用这些性，那你就很难离开它了。对于那些没有时间或能力下载和试用设计器的朋友，我们特意创建了一个预览视频给大家观看。我们模拟了一些接口。我们尝试展示更多的特性和实用的功能。

一段时间，小弟去收邮件的时候，就会发现有来自 extjs.com 的温馨提示，被告知 Ext 设计师（Ext Designer）正在测试，不日将会发布云云。上个礼拜，设计师终于结束 RC测试，以1.0正式版本面世于人了。虽不说千呼万唤始出来，但也引起了不小的骚动，何以见得？君不见 Javaeye 上计数器有12100~，排名竟第一呵呵，对 Ext IDE 感兴趣、争相一睹设计师风采的朋友可谓络绎不绝。

Sencha SDK Tools（主页http://www.sencha.com/products/sdk-tools/）是 Sencha 公司围绕 Ext JS 和 JavaScript 应用程序所推出开发者工具箱。在 Sencha 公司内部，如何借助工具来提高生产力一直是大家努力追求的目标或者渴求所在。随着项目的加大，自动化工具需求的呼声也越来越高，于是出现了不少开源或非开源的辅助工具包。

是的，Ext JS 6 就要来了！Ext JS 6 最大的改变，莫过于就是将 PC 端与移动端的代码统一起来，务求采用相同 API 来开发不同平台的客户端界面，这样无论桌面、平板和手机都是使用同一个 JavaScript 框架：Sencha Ext JS 6。也就是说，两者整合在一起啦~于是你写一份代码，就可以“到处运行”，这样开发效率不是很高吗？

官方的技巧介绍 Tips

介绍 Wdiget 之前，我想说说一个关于摘取网页的小插曲。之前我为大家介绍过摘取网页的好工具，ScrapBook 。ScrapBook 在处理纯视觉的页面，也就是 CSS/HTML 的时候，表现较为满意，只不过在选择下载“JavaScript”，就有那么一点力不从心了，——这不，人家也在上面说了“JavaScript may cause some problems”。的确，我使用 ScrapBook 的时候真是会碰到一些页面渲染不正确的问题。那，有没有比较好的工具，说白了，就是摘取页面的“银弹”。

说到这儿，便想起刚学网页的时候，使用 Dreamweaver 的一个按钮翻转的 JS，那是很典型的网页效果，说出函数名字来大伙还记得吗？……MM_preloadImages('images/2.jpg')、MM_swapImage('rotator','','images/2.jpg',1) 呵呵。同样我们也可以在 Ext Core 之中轻松实现，这部分内容放在本文第三小节中为大家介绍。

现在开始谈谈 Ext JS Core，有关网页 Widget 的应用。首先是经典的 Lightbox 效果（单击我进入演示）。Ext.ux.Lightbox 支持两种方式的登记（register()），一种是单张的图片登记的，无须多说；另外一种是批量的，就是有“上一张”/“下一张”的效果，供用户前进或者后退。应该说，这两种方式已经满足了一般 Lightbox 效果的要求，而且图片出现的时候带有动画效果，让用户有比较活泼的感觉。

旧时，写 yuiext 的代码的时候便学习过这些代码，两侧都是制作动画的代码。时间大概是两年前左右（07年初），但心路历程感觉是过了许久 呵呵，真的有天上十天，地下十年的感觉。那时候，靠自学，瞎浑的什么的都不懂，往这几句 script 撞呀撞呀，撞到做出效果为止！这不，一番经历，好歹也认识不少：JS 的道路并不坦，学 ajax 真的要下苦功！

Ext 4概述Ext 4有志诚成为Web程序其革命性的开发平台。框架中的每一个首要的组件几乎都作了改善，而且属于相当大幅度的改善。对于Ext3来说——4.0许多组件以及子系统都是表现得焕然一新！本指南会向您提供有关Ext3到Ext4期间变化所呈现的一方面。如果您在阅读本文档时正好发现任何问题，请积极反馈，或来到Sencha论坛《迁移Ext3到Ext 4》的帖子还有来到Ext中文网之JS堂社区反馈吧！一般性问题该文档通用于[#ext-core Ext Core]及[#extjs Ext JS]。E

原文：http://docs.sencha.com/ext-js/4-0/#!/guide/keyboard_nav翻译：frank/sp42 转载请保留本页信息使用键盘的原因，无非大致两个原因：一、控制鼠标指针不及敲键盘来得快；二、某些用户用不了鼠标，这是可用性方面的问题（accessibility）。Navigating with your keyboard is of

ExtJS4Up—ExtJS 4 升级课程Upgrading to Ext JS 4ExtJS4Up—ExtJS 4 升级课程Upgrading to Ext JS 4本课程针对 ExtJS 3 的程序员而设。通过本课程可以快速掌握 ExtJS 4 的新技术，包括Ext Core的类机制、数据模型、表单、布局、图标和绘图、Grid 强大的功能、SASS 主题以及 Sencha MVC 等等。

Ext 4概述Ext 4有志诚成为Web程序其革命性的开发平台。框架中的每一个首要的组件几乎都作了改善，而且属于相当大幅度的改善。对于Ext3来说——4.0许多组件以及子系统都是表现得焕然一新！本指南会向您提供有关Ext3到Ext4期间变化所呈现的一方面。如果您在阅读本文档时正好发现任何问题，请积极反馈，或来到Sencha论坛《迁移Ext3到Ext 4》的帖子还有来到Ext中文网之JS堂社区反馈吧！一般性问题该文档通用于Ext Core及Ext JS。Ext 3的兼容性我们几次更新Ext J

数据表格（Grid）这次升级Ext 4全部重写了Grid组件。显然，诸多理由和原因迫使我们升级Grid，但Ext 4 Grid向后兼容方面真的很难顾全。为此，我们将会提供一份关于Grid在Ext3升级到Ext4的指南。智能化渲染旧Ext JS 3 Grid工作起来还是蛮不错的。但透过“最小公分母（least common denominator）”的方法论来确定其各种功能的话，很容易带来一点不足的就是，伴随着Grid的每一项功能，都会生成大量的HTML Markup产生。我们不得不面对这个问题。

Layout参考资源<br />Ext 4 Layouts (video)<br />Ext 4 Layouts (slides<br />ComponentLayout<br />ComponentLayout是一种新型的布局方式，许多复杂的组件就采用这种布局（与之对应的为ContainerLayout，“ContainerLayout”——传统基于容器布局的新名字）来计算内置元素的大小尺寸，以响应resize的调用。Field字段组件的FieldLayout布局，关于labell控件和input元素

这些都不是魔法，却给JavaScript带来神奇般的效果，原因在于： * Ext.Base – 任何一个类都会继承的Ext.Base。它是居于最底层的一个类。 * Ext.Class – 创建新的类工厂。 * Ext.ClassLoader – 加载器用于保证页面上找不到类所进行的工作。 * Ext.ClassManager –启动类的创建过程和管理依赖关系。所列对象都是幕后的功臣，它们为你定义和使用某一个类都作出自己应有的贡献，而你却不一定要全部知晓它

docs文档中心完全不一样了，但似乎还有明显的显示问题。docs好像不用部署到服务器了。直接file本地打开，更易用。提供skin的psd原始图层，这点十分好，便于UI修改皮肤。不过俺装的是ps 7.0 版本打不开高版本。这次发布中，只有ext-all-debug.js版本没有压缩混淆的版本。我立刻用google complier压了一下，变为714kb，2768kb→714kb，ver 4.0 pc-1。目录大变样，乃大幅重构后必然的结果……个人感觉目录的规划更清爽，如右图。

Summary: 介绍Ext JS 4的Grid Ext JS 4 Grid Components Author: Brian Moeskau(译者：Frank Cheung) Published: 2011三月七日 Ext Version: 4.x Languages: Chinese 该文英文版本 我们正在不懈地努力着Ext JS4。到目前为止所呈送给各位看官的只是程序员预览版本（Developer Perview），不过我们打算在未来四到六个星期之内，就会发

ext4 发布了：http://www.sencha.com/blog/ext-js-4-developer-preview/下载http://downloads.sencha.com/extjs/ext-4.0-pr1.zip

谨代表全体的ExJS项目开发组成员，我本人非常由衷地宣布Ext JS 4开发者预览版本，正式可用了！ExtJS4 不但为历来变革最大的一次版本，还包含了当今JavaScript框架技术最为令人侧目的力量。从生成的HTML到高层的类机制，我们对框架的每一寸地方皆进行了革新，具体还包括，统一了API、增加了相当多的功能，以及为之整个框架带来性能上的提升等等。我们受到了这三个目标的驱动来推动Ext的开发：速度（speed）、健壮性（robustness）和易用性。为达到此目标，我们甚至把Ext的里里外外

官方提供四个围绕于Ext JS类加载机制的例子供大家演示 、下载 （例子已汉化），起初页面加载的只是基本调用的代码，而实际的代码必须经过动态请求从服务端获取回来。运行这些例子都需要事前部署在服务器之上才可以，不用动态的服务器亦可，并且建议读者在测试例子的同时打开您的Firebug一边运行程序，一边留意AJAX是如何从服务端哪里加载文件的，从第一个例子的一份文件到第四例子的六分文件的情形都有。

在这份演示中，我们向大家透露了数据包崭新的功能有哪些。假设例子是个简单的博客程序，博客的模型有用户User，帖子Post及评论Comment。例子依赖服务器的远程调用须要部署在一个服务器上，静态服务器即可。1.创建一个模型的实例首先要创建一个User模型的实例。需要指出的是，这里的User变量是一个全局变量。虽然全局变量应该慎重使用，但如果这里只是一个例子的话所以直接用上了。User是一个模型类。var frank = new User({ name: 'Frank Cheung'

Ext Core新型类系统参考资源Ext JS 4的倒数：动态加载和新的类机制（上）Ext JS 4的倒数：动态加载和新的类机制（下）Ext JS 4 的类机制主要围绕传统OO模型而设计，弥补了Prototype OO不足。虽然性质上仍为模拟的手段，但包含了比较完整的OO特征，并且保持对旧Ext3类机100%兼容。Ext JS 4（连同 Ext Core）提供的新功能有：继承方面Ext.defined代替了原来Ext.extend的写法。 自动计算依赖关系及动态类加载。 多态 静态成员

Ext JS参考资源<br />Intro to Ext 4 (video<br />Ext 4 Architecture (video)通用问题适配器（Adapters）<br />之前的各个Ext版本中都可以透过使用适配器（adpaters）的方式转换第三方的JavaScript库为我所用。Ext4的话就没这支歌仔唱了。改朝换代后，Ext JS应用程序的底层库唯一限定为Ext Core。不过我们依然可以继续让Ext Core与别的JS库共存于一个JS运行时（实际上这就是为什么一些JavaSc

 面板Panel支持了边界接触（Docking）Panel的改变之一便是通过面板特定的组件布局类（a panel-specific ComponentLayout）来负责管理其边界内所接触的元素项。面板body元素会铺张至任何空白的位置。任何组件都可以通过设置目标面板的dockedItems配置项属性来相接触，而且对方面板的dock属性也要与之设置好才行。如此一来，Ext3中困难重重的水平界工具条现今已大幅改进其灵活性，在Ext4中轻而易举地实现上述功能。头部Header的改进头部Header 现今为容

原文：http://docs.sencha.com/ext-js/4-0/#!/guide/grid翻译：frank/sp42 转载请保留本页信息GridsGrid 面板为 Ext JS 的大头核心之一。它是一个通用性很强的组件，提供了一个简单的方式来显示、排序（sort）、分组（group）和编辑（edit）数据。The Grid Panel is one of the ce