• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

重要消息：按照Ext Roadmap 的规划， Ext 2.1（2008春天）已经完整支持REST了！不错的消息！

REST与RESTful Web Services

表述性状态传送（REST ）是一种架构上的风格。此术语由Roy Fielding （联合制定 HTTP标准联合作者之一）所创造。在他的博士论文的第五章中 ， 焦点的内容是关于现代Web架构的设计底层原理和与其他架构风格所不同的地方 。

对于REST粗浅的理解可以这样地形容:你拥有一些资源（Resources） （概念化一些对象，就像数据库中实体）， 资源统一经由某些接口所暴露出来（web之上便是HTTP协议 和五个常用的标准HTTP动词：GET 、POST 、PUT 、DELETE 和OPTIONS ）。 资源的状态表述（Representations） 经统一的接口访问和操作。比如，要查看用户的账号你就要GET账号的状态表述，要更新它就要PUT一次新的表述，要移除它就要DELETE资源等等...

REST并不限制应用于HTTP上（HTTP一种基于消息的协议，驱动着整个互联网），而且纯技术而言，为实现REST风格，你的统一接口 不一定要使用以上五个动词，也可达到真的“RESTful”。但目前大多数基于WEB的“RESTful”服务（web-based services）却是 构建于采用这五个标准动词的HTTP协议，因此我们会着重关心。

我深受REST的影响缘起于Leonard Richardson和Sam Ruby有关该主题的权威书籍（07年期间）RESTful Web Services （O'Reilly 出版）。欲对REST了解更深的话我就强烈推荐你阅读这本书。为不偏离本文主旨，我不打算讨论REST的理论和解释为什么要采用RESTful风格的 Web Services（总之本文的侧重点不在这里），所以，笔者这里假设在下已经权衡分析REST的利、弊并作出决定投身REST的革命中:)

A Disclaimer of Sorts

无论是ExtJS还是其他Ajax库，凡涉及RESTful Web Services之处并非神秘不可测，终究我们所研究的REST只是在利用HTTP协议通讯下的，一组最佳实践而已。好的消息是，在主流浏览器中，让 Ajax成为可能的XmlHttpRequest对象均可完整地支持五种标准的HTTP动词。坏消息是几乎是所有的WEB开发者到最近才意识到REST的 重要性，这样就导致了大多数的Ajax的库、框架到现在还是认为你只会发起GET 或POST的请求。有鉴于此，你就必须了解AJAX库的底层是怎么样的，去操作PUT/DELETE/OPTIONS的请求。总之，本文可被看做是进一步 挖掘ExtJS API的教程，竭尽全力使你懂得API的原理（借此能对非REST的ExtJS用户有所帮助）。

HTTP方法

当需要在Ajax请求中指定某个HTTP方法是不太困难的，尤其在使用底层方法Ext.Ajax.request()方法的时候。由于我们多数是在 较高级的API下工作的（像配置Ext.grid.GridPanel中的Ext.data.Store），所以接触Ext.Ajax.request方 法的机会比较小，但并不说明在调用这种级别的API是麻烦的，相反这是很方便地让你控制Ext发出各种请求（当调试RESTful Web服务时，能更方便地直接生成这些请求，——不过你可能发现基于命令行的curl库会更为方便）。

以下是一些例子（使用Firebug的控制台来了解例子运行的状况并实时观察XHR正在发出的请求）。

从/users资源处获取（GET）列表：

Ext.Ajax.request({
 url: '/users',
 method: 'GET'
})

POST（提交）一篇新的文章到/articles资源：

Ext.Ajax.request({
 url: '/articles',
 method: 'POST',
 params: {
  author: 'Patrick Donelan',
  subject: 'RESTful Web Services'
 }
})

在/articles/restful-web-services 资源处，对文章PUT（执行）一次representation（表征式）的更新：

Ext.Ajax.request({
 url: '/articles/restful-web-services',
 method: 'PUT',
 params: {
  author: 'Patrick Donelan',
  subject: 'RESTful Web Services are easy with Ext!'
 }
})

DELETE（删除）位于/articles/rpc-is-the-best-web-architecture的资源：

Ext.Ajax.request({
 url: '/articles/rpc-is-the-best-web-architecture',
 method: 'DELETE',
 success: function(){ alert('Begone!'); }
})

HTTP状态代码

HTTP规范中定义了许多状态代码（Status Codes） ，用于代码表示HTTP传输过程是怎样的。下面都一些你熟悉的代码：

• '404 Not Found' - 找不到请求的资源
• '401 Unauthorized' - 请求需要用户认证
• '200 OK' - 请求发生成功

也有可能是：

• '500 Internal Server Error' - 服务器发生错误
• '503 Service Unavailable' - web服务器有可能超负荷了

如果你对过去五年的WEB开发有所了解，你会发现为什么仅仅有这些Status Codes是情有可原的。话又说回来，HTML文件构成的静态站点只会让你遇到以上的status code。而由编程语言（如Perl、PHP、Ruby、Java等）动态生成的站点，你可能遇到其他更多的Status Codes。

综合来说：HTTP status codes（都是三位数字）可归纳为:

• 1xx - 信息 Informational（可能与你无关）
• 2xx - 成功 Success（例如'200 OK'和'201 Created'）
• 3xx - 转向 Redirection
• 4xx - 客户端错误 Client Error（例如一般的“400 Bas Request”）
• 5xx - 服务端错误 Server Error （例如“500 Internal Server Error”）

有人会问，有必要这么详细的分类吗？当然有，不过为了不涉及其他过多的话题我假设你懂得原因（参见文章底部的#延伸阅读 ）部分以了解更多的内容）。

使用HTTP状态代码的一个很好的理由就是（另外一个是因为我们是JavaScript的开发者）可以让我们无须理会请求的内容是什么、返回的Response的具体又是什么就可以处理分析这次的Response成功操作与否。

例如，脚本无须了解响应的消息体（response body）的格式究竟是什么就可得知请求成功与否（4xx有可能验证错误，2xx操作成功，5xx服务器不能工作）。

你完全可以在你的脚本中构建一个清晰而合理的方式与服务端通讯，而且你会越来越感觉与HTTP系统打交道是一个非常自然的事情（例如你脚本中有错误了那么服务端就可能反馈你一个5xx的状态代码）。

另外重要的一方面是，你会发现不需要将状态信息放到整个body身上，这样对于你(one less non-standard thing to document) 和其他使用你Web服务的人都带来了方便，因为在统一的接口界面下（interface）他们能够利用现有的知识而不需要再学习你的语法。

牵涉一个相关的例子，例如，Ext API其中一部分我觉得要强调的是（尽管这里表达是良性的批评-见#A Disclaimer of Sorts ），在服务端的响应中，BasicForm与Form的actions应接收某些特定的Ext参数 ，以便正确自动地作出表单验证和回调函数success/failure的处理。

例如，一次成功的请求应该会返回'200 OK'和下面的实体（尤其注意"success"属性）：

{
 "success": true,
 "data": {
  "field_id_1": "Field 1 Value",
  "field_id_2": "Field 2 Value"
 }
}

实体好像是多余的，因为你会觉得200的状态代码是代表成功的。

另外，即使请求不获验证的通过，也是返回'200 OK'（不返回4XX的代码，那样的意思是请求包含客户端无效的数据），实体会是这样的：

{
 "success": false,
 "errors": [
  { "id": "field_id_1", "msg": "Field 1 Error Message" },
  { "id": "field_id_2", "msg": "Field 2 Error Message" }
 ]
}

当中最大的问题是，如果你只是想提交表单，却在JSON/xml实体body中忘记包含Ext指定的属性"success: true"就会返回一个成功的status code但是空内容的body：

{
}

即是服务端告诉你这是一个成功的请求，form所属的提交的handler却不会执行相应的回调函数！ 这样会使得不熟悉ExtJS的程序员狂抓（或者像我这样的人有时会忘记强制性的“success”属性），为什么Ext会忽略那些状态代码。

总之，回到务实的态度上，你可以用Ext.form.BasicForm或Ext.form.Form提交Aajx表单，而不需要 在实体上指定Ext特有的success属性，仍然可以提交如执行Ext.Ajax.request()时相类似，参数做了有关http状态码与回调 success/failure的方面的事情：

Ext.Ajax.request({
 url: '/some_resource',
 method: 'POST',
 form: 'my-form-id',
 success: function(){alert('Must have been 2xx http status code')},
 failure: function(){alert('Must have been 4xx or a 5xx http status code')},
});

这意味着验证错误的信息将不能自动显示（却是一个好的功能）你可以在Ex底层代码中轻松地分离这一块的功能，若你遭遇到4xx的代码就直接调用该方 法。下面我就我组件项目中的实际需求贴出来给大家看看，我先没有使用Ext.form.BasicForm因为我希望实现Http状态码感知（HTTP Status Code aware）！

Busting the Cache-buster

使用REST其中一个好处是，你会与HTTP一起 工作而不是排斥它（又来RPC?!）比如，你很可能会依靠HTTP headers来控制内容的有效期和缓存。默认下，为每次得到刷新内容，Ext会在每次的GET中加入一个特别的“cache-buster”参数。要禁 用这项功能，你可以在javascript代码中加入这一行(which those fond of double-negatives will especially enjoy)：

Ext.Ajax.disableCaching = false;

表述式的资源，文档类型（Content Types）和Accept: header

假设我们有一处表述式的资源位于 http://server.com/resource 你打算用GET方法获取它。 一些RESTful Web Service会根据你请求中HTTP头部"Accept:"字段以决定返回序列化的格式。 比如，请求是这样的：

GET /resource HTTP/1.1
Host: server.com
Accept: application/json

这是服务端会返回（JSON格式）：

[ 
 {a:1, b:2},
 {a:3, b:4}
]

若你的请求是这样的：

GET /resource HTTP/1.1
Host: server.com
Accept: */*

服务端就会返回默认的格式，如XML:

<opt>
 <data a="1" b="2" />
 <data a="3" b="4" />
</opt>

Ext中的一个常见的场景是，在获取所有的表述内容的都固定某种的格式（很可能是JSON）,最快的方法是在每个请求中设置一个缺省的头部（"Accept:" header）：

Ext.Ajax.defaultHeaders = {
 'Accept': 'application/json'
};

之后发生的所有请求将把"Accept:"的头部内容设置为"application/json"。 例如，我们发起一次GET的请求到/resource并观察Firebug 检查发出的headers：

Ext.Ajax.request({
 url: '/resource',
 params: {
  test: 1
 },
 method: 'GET'
})

得到：

Host: server.com
Accept: application/json
X-Requested-With: XMLHttpRequest
..

Data Stores，自定义HTTP Methods（HTTP方法）和Ext.data.JsonStore的实践例子

Ext具备清晰而完整对象层次。一个例子便是Ext.data.Store把Record对象“封装”为客户端缓存，用于某些组件，如 GridPanel、ComboBox或DataView提取数据。下面会讲到用 Ext.data.JsonStore类动态生成 Ext.form.ComboBox组件，假设有一个Web Service，能够返回JSON格式的资源：

var cb = new Ext.form.ComboBox({
 store: new Ext.data.JsonStore({
  url: '/resource?query=something',
  fields: ['id']
  }),
 displayField: 'id',
 valueField: 'id',
 triggerAction: 'all',
 renderTo: document.body
})

要留意查询的参数那里（通常给人第一的感觉这应该是GET的请求），在EXT中实际还是使用了POST的方法获取数据！

如果我们就这样发送到一个RESTful的Web Service，你很可能就会发现返回的是“405 -Not Implemented”的HTTP状态码（假设资源仅支持GET）。 即使你的面对的不是一个RESTfule的Web Service，只要你的服务端语言能够分辨GET或POST的参数的话，你仍有机会使用GET，让服务器能够读取请求的参数。

Ext.data.JsonStore实际上来说是混合了Ext.data.Proxy与Ext.data.Reader的一个强大的 Ext.data.Store类，减少了不必要的对象耦合。不过接下来我们不使用Ext.data.JsonStore而是重新定义我们的 Ext.data.JsonStore,这是增加了几行代码但能更好地说明问题。 如果你经常使用这个store你可以重新定义个Ext.data.MorePowerfulJsonStore对象，将多个对象封装在内（instead of hard-wiring things）：

var cb = new Ext.form.ComboBox({
 store: new Ext.data.Store({
  proxy: new Ext.data.HttpProxy({
   url: '/resource',
   method: 'GET',
   params: {
 	query: 'something'
   }
  }),
  reader: new Ext.data.JsonReader({
   fields: ['id']
  })
 }),
 displayField: 'id',
 valueField: 'id',
 triggerAction: 'all',
 renderTo: document.body
})

正如所见，通过定义Ext.data.HttpProxy可允许你指定任意一种HTTP方法。因此除了你习惯的GET方法获取Data Store对象，还可以使用其他任意你喜欢的HTTP方法。

HTTP认证（Authentication）

HTTP协议中相关的认证头部，都是可扩展和定义良好的字段，依靠这些字段来完成HTTP的认证机制（HTTP Authention scheme），是基于RESTful风格的Web Services的常见做法。实现的例子有HTTP Basic Authentication 、HTTP Digest Authentication 和Amazon的custom S3 authentication scheme （这些都是相应到公钥/密钥的概念）。

这是一个HTTP Basic 认证的应用例子，--通过Apacheht .htaccess文件保护目录/网站的账号和密码，假设我们处于http://mysite.com/protected_content 的资源是密码保护的：

GET /protected_content HTTP/1.1
Host: mysite.com

web service 返回以下头部（header）：

HTTP/1.1 401 Authorization Required
WWW-Authenticate: Basic
..

头部里的www-Authenticate项设置为Basic，即服务端希望您使用HTTP的Basic认证（WWW-Authenticate， 这是应用在RESTful Web Services中的表示HTTP状态代码HTTP Status Codes的一个例子），现在，HTTP Basic认证可以在Authorization的位置观察到，用户名和密码base64编码后，前置一个"Basic"的字符串，用分号":"与 Authorization相分隔开。假设现在你的用户名是"Aladdin"和密码是"open sesame"，那你所需要提交的认证是这样的：

GET /protected_content HTTP/1.1
Host: mysite.com
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

服务器接受请求后，会对用户名和密码进行base64的解码（本例中你的密码明显是以普通文本去发送的，不过你亦可以是用HTTP的Basic认证来运行实际的web service）然后根据Authorization 规则以决定应该返回什么内容（很希望接下来的是被保护的内容）。

理论上，只要在Authorzation头部进行相关设置，通过一个Ajax调用也可以完成一个这个的请求，达到相同的目的，下面就是这样一个例子，也是按照一般做法发起请求 如：

Ext.Ajax.defaultHeaders.Authorization = "Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==";
Ext.Ajax.request({
 url: '/protected_content',
 method: 'GET'
})

这样可以正常运行（另外很明显是你或者会定义一个快捷的函数来生成Authorization的字符串，论坛上 有base64编码相关的帖子）。

有一个问题便是，一涉及到HTTP认证，浏览器就会自动提供帮助。如果你欲通过WWW-Authenticate 对资源发送 Basic的请求，那资源会返回401Authorization Required的状态代码，Web浏览器这时就会提示一个登陆的对话框，并会为你进行base64的字符编码，并保存在本地缓存中，方便在每一次请求都 将这个Authorization加入头部中。本身凯说就是比较方便的，但也有下面相关的问题：

• 你不可以遵循你程序外观设置样式；
• 你不可以通过修改Ext.Ajax.defaultHeaders的属性来重写Authorization的头部，意味着你想以别的用户身份就不太方便；
• 你不能从浏览器缓存中删除用户自己信任条目，意味着你记录用户登出时不太方便。

由于是使用了Ajax无刷新的表单提交，即使你提交后假设服务器不返回401 Authorization Required 的相 应，浏览器并不会自己作进一步动作，而用户也会毫不知情。在使用RESTful风格的HTTP Basic认证效验机制下，我将用户在表单填好username/password定义到我之前安排好资源位置称作"/my_account" HTTP Basic 认证效验中，逻辑句柄会向我之前定义好的称作"/my_account"位置获取（GETS）带有Authorization头部的表征信息 （respresentation）。如果这段respresention是空白的话，逻辑句柄就判断为安全效验的信任不获取通过。若得到的是一段通过用 户的表征信息，那么则认为登陆成功，并设置Ext.Ajax.defaultHeaders.Authorization为已认证的字符串。

但是如果用户想绕过登录界面直接去访问受保护的资源时，会发生什么情形呢？可以看出，这对单页面的Ajax Web程序不存在问题，但如果说是传统的多页面的Web程序的场景，用户很可能会收藏这个资源地址直接访问。在单页面的Web程序也有可能调用一个 RESTful的API（例如通过JavaScript或许会发送一个XHR的z请求获取一组用户列表，生成UI上的comboBox）。假设用户在浏览 器地址栏输入/api/users将会得到401 Authorization Required 的回应，显示登录的对话框并缓存结果，需要再次输入信息。感谢的是，XmlHttpRequst的设计者已经想到过这个问题，在请求的参数上加两个可选的参数，指定用户名称密码（亦进行base64的编码），不过遗憾的是，当前标准的ExtJs Ajax调用并不支持这两个可选的参数。 直到有解决方案出现之前（我想这需要一点时间）你有这些可选方案：

• 1 在一些浏览器上在url后面加上用户名/密码：注意一些浏览器不支持 （包括IE6以后的版本）；
• 2 借助Doug Hendricks优秀的ext-baseX.js库 ；
• 3 返回一个非标准的HTTP状态代码，而不是401Authorization Required这样浏览器就不会提示，例如你可返回403Forbidden典型把这个403的代码涉及到HTTP/101标准 ，的内容即是Authorization不会帮助而且不应重复要求，但是你会打算取巧地使用这种方法（不足的是实用其他的Web Service会有所限制）

Cookies与Sessions

虽然能使用Cookies，来方便地维护Session，但是由于这是把无态的协议切换为一个有态的协议，所以并不符合RESTful的风格，本文将不会集中谈论HTTP缺失之处（若读者有兴趣了解，可阅读文章#Further Reading 部分）。这时Cookies如果在某些应用场合如，客户端的本地储存使用，仍不算违反RESTful的建议要求。

举一个例子，为了减少在不同的浏览器中来回输入登陆的信息，可以登录的信息，可在登录的表单加入“记住我”的单选框（checkbox），以方便用户下次登录。即使在多页面的ajax程序中你也需要这项功能来解决每次页面刷新后不能持久化的问题。

要实现这种方案你可以设置在Cookies中保存用户认证的详细信息：

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
 path: "/",
 expires: new Date(new Date().getTime()+(1000*60*60*24*14)) //remember for 2 weeks
}));
Ext.state.Manager.set('auth', "Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==");

And then test for the existence of this cookie at app (or page) load-time and if found, use it to transparently authenticate.

本质上这很明显是不安全的，任何人都可以访问包含用户名和密码的cookie缓存，要最小限度避免这种情况你应考虑使用更高级的HTTP认 证机制，值得指出的是无数网站所普遍使用的是session-key-in-a-cookie，会很容易受到大量自身安全漏洞的攻击的，此类攻击诸如：Session hijacking 、Cross-site request forgery 等等。

完毕之标记

This article covers the topics where I've found myself heading slightly off the beaten path when using Ext to talk to my own RESTful Web Services. If you find other areas that aren't covered, as I'm sure will happen as REST becomes more widespread, please drop me a line as I'd love to hear how your own experiences with REST and Ext go.

延伸阅读

• RESTful Web Services , by Leonard Richardson and Sam Ruby, 2007 (O'Reilly) - provides a definitive guide to all things REST, as well as the Resource Oriented Architecture which you can use to implement highly functional, real-world RESTful Web Services.
• Roy Fielding's 2000 PhD Dissertation which first coined the term REST
• curl library
• HTTP Status Codes
• REST on Wikipedia (contains links to other REST resources, no pun intended)

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

/**
 * 
 * defineLiteral('bar', 'baz', 'qux', 'quux'); // => bar.baz.qux.quux
 * bar.baz.qux.quux.toString(); // => 'bar.baz.qux.quux'
 */
function defineLiteral() {
  var o = window, args = arguments, prop;
  for (var i=0, l = arguments.length; i>l; ++i) {
    prop = arguments[i];
    o[prop] = o[prop] || { }; o = o[prop];
    if (i == l-1) o['toString'] = function() {
      return Array.prototype.join.call(args, '.')
    }
  }
  return o;
} 

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

    /**
     * Utility to set up the prototype, constructor and superclass properties to
     * support an inheritance strategy that can chain constructors and methods.
     * Static members will not be inherited.
     *
     * @method extend
     * @static
     * @param {Function} subc   the object to modify
     * @param {Function} superc the object to inherit
     * @param {Object} overrides  additional properties/methods to add to the
     *                              subclass prototype.  These will override the
     *                              matching items obtained from the superclass 
     *                              if present.
     */
    extend: function(subc, superc, overrides) {
        if (!superc||!subc) {
            throw new Error("extend failed, please check that " +
                            "all dependencies are included.");
        }
        var F = function() {};
        F.prototype=superc.prototype;
        subc.prototype=new F();
        subc.prototype.constructor=subc;
        subc.superclass=superc.prototype;
        if (superc.prototype.constructor == Object.prototype.constructor) {
            superc.prototype.constructor=superc;
        }
    
        if (overrides) {
            for (var i in overrides) {
                if (L.hasOwnProperty(overrides, i)) {
                    subc.prototype[i]=overrides[i];
                }
            }

            L._IEEnumFix(subc.prototype, overrides);
        }
    }

        
        /**
         * 继承，并由传递的值决定是否覆盖原对象的属性
         * 返回的对象中也增加了override()函数，用于覆盖实例的成员
         * @param {Object} subclass 子类，用于继承（该类继承了父类所有属性，并最终返回该对象）
         * @param {Object} superclass 父类，被继承
         * @param {Object} overrides （该参数可选） 一个对象，将它本身携带的属性对子类进行覆盖
         * @method extend
         */
        extend : function(){
            // inline overrides
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            return function(sb, sp, overrides){
                if(typeof sp == 'object'){
                    overrides = sp;
                    sp = sb;
                    sb = function(){sp.apply(this, arguments);};
                }
                var F = function(){}, sbp, spp = sp.prototype;
                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;
                sb.superclass=spp;
                if(spp.constructor == Object.prototype.constructor){
                    spp.constructor=sp;
                }
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.override = io;
                Ext.override(sb, overrides);
                return sb;
            };
        }()

        /**
         * Extends one class with another class and optionally overrides members with the passed literal. This class
         * also adds the function "override()" to the class that can be used to override
         * members on an instance.
         * * <p>
         * This function also supports a 2-argument call in which the subclass's constructor is
         * not passed as an argument. In this form, the parameters are as follows:</p><p>
         * <div class="mdetail-params"><ul>
         * <li><code>superclass</code>
         * <div class="sub-desc">The class being extended</div></li>
         * <li><code>overrides</code>
         * <div class="sub-desc">A literal with members which are copied into the subclass's
         * prototype, and are therefore shared among all instances of the new class.<p>
         * This may contain a special member named <tt><b>constructor</b></tt>. This is used
         * to define the constructor of the new class, and is returned. If this property is
         * <i>not</i> specified, a constructor is generated and returned which just calls the
         * superclass's constructor passing on its parameters.</p></div></li>
         * </ul></div></p><p>
         * For example, to create a subclass of the Ext GridPanel:
         * <pre><code>
    MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
        constructor: function(config) {
            // Your preprocessing here
        	MyGridPanel.superclass.constructor.apply(this, arguments);
            // Your postprocessing here
        },

        yourMethod: function() {
            // etc.
        }
    });
</code></pre>
         * </p>
         * @param {Function} subclass The class inheriting the functionality
         * @param {Function} superclass The class being extended
         * @param {Object} overrides (optional) A literal with members which are copied into the subclass's
         * prototype, and are therefore shared between all instances of the new class.
         * @return {Function} The subclass constructor.
         * @method extend
         */
        extend : function(){
            // inline overrides
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            var oc = Object.prototype.constructor;
            
            return function(sb, sp, overrides){
                if(typeof sp == 'object'){
                    overrides = sp;
                    sp = sb;
                    sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
                }
                var F = function(){}, sbp, spp = sp.prototype;
                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;
                sb.superclass=spp;
                if(spp.constructor == oc){
                    spp.constructor=sp;
                }
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.override = io;
                Ext.override(sb, overrides);
                sb.extend = function(o){Ext.extend(sb, o);};
                return sb;
            };
        }(),

// Inspired by base2 and Prototype
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};
 
  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;
   
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;
   
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
           
            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];
           
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);       
            this._super = tmp;
           
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
   
    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
   
    // Populate our constructed prototype object
    Class.prototype = prototype;
   
    // Enforce the constructor to be what we expect
    Class.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;
   
    return Class;
  };
})();

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

Ext.ux.StatefulTabPanel = Ext.extend(Ext.TabPanel, {
 stateEvents: ['tabchange'],
 getState: function() {return{tab:this.getActiveTab().id}},
 applyState: function(state) {this.setActiveTab(state.tab);}
});

Ext.state.Manager.setProvider(
 new Ext.state.CookieProvider({
  expires: new Date(new Date().getTime()+(1000*60*60*24*365)), //一年后
 }));

Ext.ux.StatefulTabPanel = Ext.extend(Ext.TabPanel, {
 stateEvents: ['tabchange'],
 getState: function() {return{activeTab:this.getActiveTab().id}},
});

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

{xtype:'mygrid", border:false, width:600, height:400, ...}

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

return new Ext.ux.MyGrid(config);

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

MyExtension = Ext.extend(Ext.Panel, {/* 对象的新属性、新方法 */});

var myExtension = new MyExtension({/* 可选的配置项 */});

MyPlugin = function() {/* 代码 */};

var myPanel = new Ext.Panel({
     plugins:[new MyPlugin({/* 可选的配置项 */})]
    ,// 其他myPanel的配置项
});

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">
 
    //根据url上指定的语言进行解码
    var locale = window.location.search 
                 ? Ext.urlDecode(window.location.search.substring(1)).locale 
                 : '';
 
    // 将本地化的JS文件加入head元素内
    var head = Ext.fly(document.getElementsByTagName('head')[0]);
    if(locale) {
        Ext.DomHelper.append(head, {
             tag:'script'
            ,type:'text/javascript'
            ,src:'../ext/src/locale/ext-lang-' + locale + '.js'
        });
    }
 
    //预先定义的window继承类
    Ext.ns('Tutorial');
    Tutorial.LocalizationWin = Ext.extend(Ext.Window, {
        initComponent:function() {
            Ext.apply(this, {
                 width:500
                ,id:'winid'
                ,height:300
                ,layout:'fit'
                ,border:false
                ,closable:false
                ,title:Ext.get('title').dom.innerHTML
                ,items:[{
                     xtype:'form'
                    ,frame:true
                    ,defaultType:'textfield'
                    ,items:[{
                          xtype:'combo'
                         ,fieldLabel:'Select Language'
                         ,name:'locale'
                         ,store:new Ext.data.SimpleStore({
                             id:0
                            ,fields:['file', 'locale']
                            ,data:[
                                 ['cs', 'Czech']
                                ,['', 'English']
                                ,['fr', 'French']
                                ,['de', 'German']
                                ,['gr', 'Greece']
                                ,['hu', 'Hungarian']
                                ,['it', 'Italian']
                                ,['ja', 'Japaneese']
                                ,['pl', 'Polish']
                                ,['pt', 'Portugal']
                                ,['ru', 'Russian']
                                ,['sk', 'Slovak']
                                ,['es', 'Spanish']
                                ,['sv_SE', 'Swedish']
                                ,['tr', 'Turkish']
                            ]
                         })
                        ,listeners:{
                            select:{fn:function(combo){
                                window.location.search = '?' 
                                    + Ext.urlEncode({locale:combo.getValue()})
                                ;
                            }}
                        }
                        ,mode:'local'
                        ,editable:false
                        ,forceSelection:true
                        ,valueField:'file'
                        ,displayField:'locale'
                        ,triggerAction:'all'
                        ,value:locale
                     },{
                         fieldLabel:'Text Field'
                        ,allowBlank:false
                    },{
                         xtype:'datefield'
                        ,fieldLabel:'Date Field'
                        ,allowBlank:false
                    }]
                }]
            }); // eo apply
            Tutorial.LocalizationWin.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent
    }); // eo Tutorial.LocalizationWin
 
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
 
    // create example window
    var win = new Tutorial.LocalizationWin();
    win.show();
});
    </script>
    <title id="title">Localization Example</title>
</head>
<body>
</body>
</html>

if(Ext.DatePicker){
   Ext.override(Ext.DatePicker, {
      todayText         : "Aujourd'hui",
      minText           : "Cette date est antérieure à la date minimum",
      maxText           : "Cette date est postérieure à la date maximum",
      disabledDaysText  : "",
      disabledDatesText : "",
      monthNames        : Date.monthNames,
      dayNames          : Date.dayNames,
      nextText          : 'Mois suivant (CTRL+Flèche droite)',
      prevText          : "Mois précédent (CTRL+Flèche gauche)",
      monthYearText     : "Choisissez un mois (CTRL+Flèche haut ou bas pour changer d'année.)",
      todayTip          : "{0} (Barre d'espace)",
      okText            : " OK ",
      cancelText        : "Annuler",
      format            : "d/m/y",
      startDay          : 1
   });
}

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
 
    <!-- Ext localization javascript -->
    <script type="text/javascript" id="extlocale"></script>
 
    <!-- Locale and example extension javascript -->
    <script type="text/javascript">
 
    // decode language passed in url
    var locale = window.location.search 
                 ? Ext.urlDecode(window.location.search.substring(1)).locale 
                 : ''
    ;
 
    // append locale script to the head
    var head = Ext.fly(document.getElementsByTagName('head')[0]);
    if(locale) {
        Ext.fly('extlocale').set({src:'../ext/src/locale/ext-lang-' + locale + '.js'});
    }
 
    // create pre-configured example window extension class
    Ext.ns('Tutorial');
    Tutorial.LocalizationWin = Ext.extend(Ext.Window, {
         titleText:'Localization Example'
        ,selectLangText:'Select Language'
        ,textFieldText:'Text Field'
        ,dateFieldText:'Date Field'
        ,initComponent:function() {
            Ext.apply(this, {
                 width:500
                ,id:'winid'
                ,height:300
                ,layout:'fit'
                ,border:false
                ,closable:false
                ,title:this.titleText
                ,items:[{
                     xtype:'form'
                    ,frame:true
                    ,defaultType:'textfield'
                    ,items:[{
                          xtype:'combo'
                         ,fieldLabel:this.selectLangText
                         ,name:'locale'
                         ,store:new Ext.data.SimpleStore({
                             id:0
                            ,fields:['file', 'locale']
                            ,data:[
                                 ['cs', 'Czech']
                                ,['', 'English']
                                ,['fr', 'French']
                                ,['de', 'German']
                                ,['gr', 'Greece']
                                ,['hu', 'Hungarian']
                                ,['it', 'Italian']
                                ,['ja', 'Japaneese']
                                ,['pl', 'Polish']
                                ,['pt', 'Portugal']
                                ,['ru', 'Russian']
                                ,['sk', 'Slovak']
                                ,['es', 'Spanish']
                                ,['sv_SE', 'Swedish']
                                ,['tr', 'Turkish']
                            ]
                         })
                        ,listeners:{
                            select:{fn:function(combo){
                                window.location.search = '?' 
                                    + Ext.urlEncode({locale:combo.getValue()})
                                ;
                            }}
                        }
                        ,mode:'local'
                        ,editable:false
                        ,forceSelection:true
                        ,valueField:'file'
                        ,displayField:'locale'
                        ,triggerAction:'all'
                        ,value:locale
                     },{
                         fieldLabel:this.textFieldText
                        ,allowBlank:false
                    },{
                         xtype:'datefield'
                        ,fieldLabel:this.dateFieldText
                        ,allowBlank:false
                    }]
                }]
            }); // eo apply
            Tutorial.LocalizationWin.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent
    }); // eo Tutorial.LocalizationWin
    </script>
 
    <!-- Application localization javascript -->
    <script type="text/javascript" id="applocale"></script>
 
    <!-- Set src for application localization javascript -->
    <script>
    if(locale) {
        Ext.fly('applocale').set({src:'app-lang-' + locale + '.js'});
    }
    </script>
 
    <!-- Main application -->
    <script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
    Ext.onReady(function() {
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';
 
        // create example window
        var win = new Tutorial.LocalizationWin();
        win.show();
    });
    </script>
    <title id="title">Localization Example</title>
</head>
<body>
</body>
</html>

/**
 * 斯洛伐克语版的教程之本地化文件
 */
if(Tutorial.LocalizationWin) {
    Ext.override(Tutorial.LocalizationWin, {
         titleText:'Príklad lokalizácie'
        ,selectLangText:'Zvoľ jazyk'
        ,textFieldText:'Textové pole'
        ,dateFieldText:'Dátumové pole'
    });
}

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

@class Ext.layout.ContainerLayout

每一个布局都内置有一个或多个{@link Ext.Container}的元素，而在Ext中，ContainerLayout是 ContainerLayout没有任何的外观表示，只是为特定功能的容器作为布局提供基础性的逻辑。 应通过继承该类的方式使用，一般很少通过关键字new直接使用。

@class Ext.layout.FitLayout

@extends Ext.layout.ContainerLayout

这是包含单个项布局的基类，这种布局会在容器上自动铺开以填充整个容器。 应通过继承此类或设置{@link Ext.Container#layout}的配置layout:'fit' 的方式创建，一般很少通过关键字new直接使用。

FitLayout没有直接的配置选项（不同于继承） 要采用FitLayout填充容器的面板，只需设置容器的layout:'fit'和加入一个面板。 即使容器指定了多个面板，只会渲染第一个面板。用法举例： 

var p = new Ext.Panel({
    title: 'Fit Layout',
    layout:'fit',
    items: {
        title: '内层面板',
        html: '<p>这是内层面板的内容</p>',
        border: false
    }
});

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

为联合Adobe， Ext2.02当中重要的一项便是针对AIR1.0中应用程序的沙箱(Application Suadbox)提供运行的支持。另外，作为范本的AIR版的Simple Tasks（简易任务）已重写以体现AIR原生功能还有一部分Ext制定组件是可以在AIR之外使用。

AIR APIs

首先，一些会用到的API我们先讲讲:

原生Window NativeWindow

Ext.air包其中一项最有用的功能。此API可创建、管理Windows，例如侦听事件发挥了标准的Ext观察者和Windows自动状态管理的作用。

var win = new Ext.air.NativeWindow({     id: winId,     file: 'task.html',     width:500,     height:350,     resizable: true });

Task NativeWindow in Simple Tasks 2

Ext.sql.*

Simple Tasks演示了怎么在SQLite数据库中持久Ext.data.Record的实例，整合的过程并不困难。

tx.data.ListStore = Ext.extend(Ext.data.Store, {     constructor: function(){         // superclass call         tx.data.ListStore.superclass.constructor.call(this, {             sortInfo:{field: 'listName', direction: "ASC"},             reader: new Ext.data.JsonReader({                 id: 'listId',                 fields: tx.data.List             })         });           this.conn = tx.data.conn;         // Ext.sql.Proxy for managing Sqlite persistence         this.proxy = new Ext.sql.Proxy(tx.data.conn, 'list', 'listId', this);     },     ...

原生的拖放和剪贴板
Simple Tasks支持拖动任意的文本拖动到Grid，自动转回为新任务（Task）。而且也可以从的系统的剪贴板粘贴新建任务，不过，其中一项最COOL的功能就是允许直接从OUTLOOK拖动任务到SimpleTask。

Dragging Outlook tasks into Simple Tasks

最小化系统状态功能

第一版的SimpleTask发布后，ExtJS内部这里需求最大的就是最小化window系统状态栏的功能。我们将自动控制系统托盘（System Tray）的功能加入到Ext.air.NativeWindow这个类中。这样，通过设置一下配置项就可最小化到系统托盘。

var win = new Ext.air.NativeWindow({     id: 'mainWindow',     instance: window.nativeWindow,       // System tray config     minimizeToTray: true,     trayIcon: 'ext-air/resources/icons/extlogo16.png',     trayTip: 'Simple Tasks',     trayMenu : [{         text: 'Open Simple Tasks',         handler: function(){             win.activate();         }     }, '-', {         text: 'Exit',         handler: function(){             air.NativeApplication.nativeApplication.exit();         }     }] });

Simple Tasks in the System Tray

音效
AIR支持播放音效，Ext.air.Sound的用法甚至更简单了。

Ext.air.Sound.play('beep.mp3');

The irritating beeping sound is sure to catch your attention

Ext制定的组件

如上文述，整个SimpleTask的程序包含了几个示范的EXT自定义组件。其中一部分是为了复用而专门设计的，未来发布的版本或许会成为标准的组件或示例。

ListTree
    ListTree与 ComboBox或SelectBox相类似，不同在于出现的是一块Ext TreePanel面板。比起普通的垂直列表更能清晰显示各层次的列表。
    伴随着这个组件另外一个酷的功能是制定的选区模型“ActivationModel”。顾名思义，它以两种形式出现（activation活动选区和记录选区selection），在活动选区下，组件支持完整的键盘控制、用键盘展开/闭合， 与标准树选区模型不同，此选区属于动作本身。

TreeList supports selection of data organized hierarchically

自定义Gird列
截屏图片可第一时间解释清楚。

Pseudo button column, used to toggle complete/active

Menu column, used to set quick reminders

Siwthc按钮

有一种类似radio按钮（单选按钮）的组件好像在桌面的应用程序上经常看得到。这儿就叫作“Switch”按钮，以便不会与标准HTML的radio按钮出现混淆。它的作用是：提供一组的按钮，同时“被按下”的只能是一个。

Quick view change

总结

无论是AIR本身的功能还是EXT的扩展，这些都可以在Simple Tasks v2的程序源码中找到真正应用的地方。如果你正在使用着Ext，那么我推荐浏览这些源码。
    －完整的源码可以在Ext 2.02的发布版本中的air/samples/tasks找到。
    －Adobe AIR 1.0 下载
    －Simple Tasks v2 面向AIR的版本 下载
    －有关Simple Tasks首个版本可查阅上次的博文。

作者：Jack Slocum

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

Ext.TaskMgr.start({run: myFunction, interval: 1000});