From Learn About the Ext JavaScript Library

Contents 1 Ext 3探胜 1.1 Ext Core 1.1.1 库大小 1.1.2 Ext Core手册 1.1.3 Ext Core的例子 1.1.4 DomQuery与CompositeElementLite 1.1.5 更简单的事件控制 1.2 Ext数据调用新方式 1.2.1 一般疑难 1.2.2 简绍Ext.Direct 1.2.3 RemotingProvider——客户端工作 1.2.4 固化批调用 1.2.5 服务器堆栈 1.2.6 例子：客服程序 1.3 UI新内容 1.3.1 行编辑器 1.3.2 ListView 1.3.3 图表 1.3.4 单元格小器件 1.3.5 状态组件 1.3.6 HBoxLayout & VBoxLayout 1.3.7 按钮组 1.3.8 分组Tabs 1.3.9 按钮 1.3.10 溢出式工具条 1.3.11 溢出式菜单 1.3.12 ToolTips 1.3.13 缓冲式Grid 1.3.14 调试控制台

Ext 3探胜

Ext Core

Ext Core提供了一系列针对Web页面日常开发使用的这一个API，Ext Core采用MIT的许可。

创建Ajax富界面的这番过程，告诉了我们，在增强当前/新开发Web页面的时候，哪些功能是尤其有用的，有了这些经验的累积，我们把他们归纳出来便是Ext Core 部分。Ext Core相当于Ext JS 3.0的一个子集，在速度与文件体积上作了优化。这样，熟悉Ext JS的开发者就可以在它们的Web网页上发挥着它们已学会的技能。

Ext Core以定义良好的面向对象知识体系来划分其自身与其他JavaScript库的关系，让你的代码达至一种清晰、便于复用的效果。Ext Core提供了跨浏览器的抽象层面：

• 操控&遍历DOM
• CSS管理
• 事件的处理
• Ajax与JSON
• 动画

除了以上DOM层面的内容，Ext Core还包括了Ext JS原来一些有用的功能：

• 基于类的继承方案
• 观察者类
• 产生HTML标签与模板
• 时控代码
• URL编码与解码

库大小

对于动态网页又或者小型一点的网页程序来说，Ext Core就是一个好选择。实不相瞒，我们搞来搞去、重构来重构去不就是为了那压缩比出来得好一点，代码行数小一点。考虑带有了这些功能在内，Ext Core已经小得不能再小了，压缩并且GZip过后大小是25kb左右。

Ext Core手册

另一方面我们从标准库划分开来的还有Ext Core的手册（已译）。它由Ext Core作者本身来写，还让社区一众高手过目一番，尽可能为初学者和老手都提供精致深入的用法指南。这本迷你书囊括了全部的类和类方法（A4->38页），并融合至API文档中。既然说到这里，我们还想鼓励每一位、包括Ext Js用户在内，都阅读一下这份手册，为的是，用起JavaScript与Ext更得心应手。

Ext Core的例子

为演示Ext Core能力，我们团队在页面上就做了几款相当有用的扩展来说明问题。希望方便您在创建自己的扩展的时候参考一下。既然有了体积不大的Ext Core，直接嵌入在贵博客就可以。下面这些例子都可以顺便分享。

DomQuery与CompositeElementLite

DomQuery提供高性能、基于选择符（Selector）的元素定位，支持大多数CSS规范的选择符、自定义选择符和简单的XPath。一个常见的例子就是控制一群DOM元素的时候。利用CompositeElementLite处理集合元素时允许我们好像单独一个元素那般处理。这里是加入样式的例子：

// 选取一群元素，这群元素中的每一个都加上“myCls”的样式
Ext.select('div:has(> span.someClass)').addClass('myCls');

更简单的事件控制

Ext Core事件的抽象层解决了跨浏览器的难题和提供了制定事件的功能。统一地，它提供了诸如延时、缓冲、委托等配置项参数。如下例，我们点击了元素就触发这样的事件：

Ext.fly('elId').on('click', function(e, t){
     // e是已作常规化的浏览器事件对象
     // t是目标元素

     // 通知用户事件的触发，更新id为log的元素的内容。
     Ext.fly('log').update('你点击元素的id是' + t.id);   
});

Ext数据调用新方式

作为开发者，我们花无数的时间来研究优秀软件开发的最佳实践。曾不止一次地常常我们遇到重复又重复的功能徘徊在前端到后端之间。我们的惯性思维是让复杂的设计模式参与进来，好让其解决逻辑与表现形式的相分离，——这就是让浏览扮演着“哑终端（a dumb terminal）”的角色。尽管RIA的进步有相当地体现了浏览器是怎样摆脱其堪坷的命运，但服务端访问形式仍不过维持相当传统。为提供一个完整的、与沟通服务端的，——切入点，我们新增了Ext.Direct，以解决应用程序中此类的问题。

一般疑难

Ext开发的工作坊中，我们尝试过不同类型的主机，从大型主机（Mainframe systems）到Java、Perl的整合，然而在配合的过程中，进行服务端编程的时候也遇到不少的问题，列举如下：

• 怎样组织业务逻辑和选择适合的置放地点
• 服务端的数据格式化和解析
• 保持着可维护的体系
• 解析Ajax响应与接收错误条件
• 多种途径的数据验证

那，有没有一种一劳永逸的跨语言（cross-language standard）的解决方案呢？

简绍Ext.Direct

Ext.Direct是Ext 3新引入的一个包。在客户端与服务端之间，它就力图帮助开发者解决针对以上所提出的难题。有了Ext.Direct，你可想像减少30%手工乏味的代码带来的好处。

Ext.Direct的名命空间就是几个与服务端相切入的这么几个类。这些新类是加入到Ext.data.Stores的命名空间中，作为Stores的低层，让调用其方法。

Ext.Direct采用提供器的架构（a provider architecture），即有一到多个提供器是负责数据传送与数据读取。此时源码中有几个准备好的提供器，例如，JsonProvider对应简单的JSON操作，PollingProvider对应反复的请求。其中有一个强大的提供器就是允许程序员把服务端的方法镜像至客户端，就好像在客户端上执行本未在服务端的方法。

RemotingProvider——客户端工作

服务端就要描述这些类的方法有哪些可暴露给客户端，期望能组织起代码的时候，更具可维护性，无论客户端还是服务端之间都愈加清晰，也不会反映在URL上面。

固化批调用

提供器有这么一个功能，把某一个配置好的时间帧（a configurable time frame）的多个批调用放在一块，然后统一发出请求，好处是减少往返的次数。如果在特定周期内接收一系列的调用的就将它们收集起来放在同一个请求之中出去。

服务器堆栈

为保证Ext JS的Direct协议畅通，必须有兼容服务端堆栈（Ext.Direct Server-side stack）准备好。服务器堆栈采用了“直接”请求的路由就是客户端与服务端的方方一一对应，由于是完全平台无关的，因此你的方法还是C#的方法。有一份全面的指南，可供几个不同服务端实现的方案服务PHP, .Net, Ruby和ColdFusion。另外，还要跟大家说的是这都基于MIT许可，可以你可以整到你所喜爱的框架中，包括Zend Framework或Struts框架。

例子：客服程序

我们的客服平台就使用了Ext.Direct。

我们演示一下是怎么暴露服务端方法至客户端，如下列的两个方法getTickets、getOpenTickets都来自类TicketAction。

我们便可以用Ext.data.Store的子类，新建一个DirectStore对象，定义这些方法来获取数据，可完全不用理会如何请求，如何响应。

var store = new Ext.data.DirectStore({
    storeId:'open-tickets',
    directFn: TicketAction.getOpenTickets,  //it's really that easy
    paramsAsHash: true,
    idProperty: 'tid',
    fields: [{
        name: 'tid',
        type: 'int'
    },
        'title',
        'display_name',
    {
        name: 'last_post_time',
        type: 'date',
        dateFormat: 'timestamp'
    }],
    sortInfo: {
        field: 'last_post_time',
        direction: 'DESC'
    }
});

可在任何时候调用TicketAction.getOpenTickets，可分别放在不同的store身上。

UI新内容

行编辑器

EditorGrid的编辑功能更轻松了，这是全新的UI组件，AnchorTips可以快速地编辑整行内容新的带来新的验证模式，验证错误的信息一下就报告给用户。

ListView

ListView可算是简化版的Grid，提供不错的性能表现，他一样有选区对象，列宽调整，排序和原本的功能。列宽库可以是百分比方式指定又可以用模板控制渲染出来的样子符合所需的要求。如果你打算实现Grid某些功能又不想使用笨重的Grid控件，不妨试试按钮。

图表

Ext.chart的图表包是利用Flash技术做出的页面效果。每一个图表仍是与Ext.data.Store绑定，Ext 3中就有专门一个FlashComponent 的类，基于BoxComponent的。只要绑定了Ext.data.Store，你不用为如何向图表同步作出担心，它会帮你安排好的了。

单元格小器件

Grid单元格可以针对性地加入小器件了。实现的方法是，在GridCellRenderer中返回一个小器件，那就不是HTML片段了。

状态组件

新的状态组件连同Toolbar使用向用户告知当前的程序状态。

HBoxLayout & VBoxLayout

Two new and extremely flexible layouts for layout out children in a single row or column. Box layouts allow precise control of the size and position of the children in a container.

按钮组

按钮组（ButtonGroup）其实就是仿照Office 07菜单做出的控件，把一些最常用的功能放在一块就是ButtonGroup。按钮可有不尺寸的大小，实现更高的灵活性和伸缩性。

var btnGroup = new Ext.ButtonGroup({
       title: 'Clipboard',
       columns: 2,
       defaults: {
            scale: 'small'
       },
       items: [{
           xtype:'splitbutton',
           text: 'Add',
           iconCls: 'add16',
           menu: [{text: 'Add'}]
        },{
           xtype:'splitbutton',
           text: 'Cut',
           iconCls: 'add16',
           menu: [{text: 'Cut'}]
        },{
           text: 'Copy',
           iconCls: 'add16'
        },{
           text: 'Paste',
           iconCls: 'add16',
           menu: [{text: 'Paste'}]
        }]
     });

分组Tabs

水方向的Tab导航有点迂腐了，试试GroupTabs，iGoogle也在用。

var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            xtype: 'grouptabpanel',
            tabWidth: 130,
            activeGroup: 0,
            items: [{
                mainItem: 1,
                items: [{
                    title: 'Tickets',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Tickets tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Subscriptions',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Subscriptions tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Users',
                    iconCls: 'x-icon-users',
                    tabTip: 'Users tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }]
            }, {
                expanded: true,
                items: [{
                    title: 'Configuration',
                    iconCls: 'x-icon-configuration',
                    tabTip: 'Configuration tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }, {
                    title: 'Email Templates',
                    iconCls: 'x-icon-templates',
                    tabTip: 'Templates tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }]
            }]
     }]
});

按钮

按钮在Ext中的业已重构，成为真正的BoxComponent中的一员，即可参与布局的管理，按钮这样就有了高/宽和文字定位的功能。产生变化的是，不单止可以在的配置项定义按钮，还可以在别处地方自由定义按钮。

溢出式工具条

对于超出可见范围的内容的工具条就可以使用该功能。菜单中每一项都有相同的处理器。这功能默认是打开，可以在配置项enableOverflow中禁止该功能。

溢出式菜单

菜单也支持溢出隐藏内容的效果。有时菜单内容过长可以让这功能派上用场。这功能默认是打开，可以在配置项enableScrolling中禁止该功能。

ToolTips

Tooltips所支持的定位配置（anchor configuration）允许你产生一种突出效果的、带箭头的提示效果。

new Ext.ToolTip({
      target: 'bottomCallout',
      anchor: 'top',
      anchorOffset: 85,
      html: 'This tip\'s anchor is centered'
});

缓冲式Grid

缓冲式Grid的特点是要显示的行才会渲染，籍此提高性能。当用户滚动到别的数据演示时，旧的数据就不显示了，那么这些数据在DOM残留的记忆就会给BufferedGridView所清除。这就要求从本质上，对原本Grid的forceFit、autoExpandColumn和布局和DOM布局作出一番修改。缓冲式Grid只对固定高度行的Grid有效。

调试控制台

调试控制台（Debug Console）已经重新制作，加入了三张新的tab，分别是Component Inspector、Object Inspector和Data Stores。Component Inspector会告诉你登记在ComponentMgr里面所有的组件，以及组件之间的父子关系。当鼠标移动到某个组件的时候，你会看到有遮罩该组件的效果。Object Inspector会检测这个对象并透视其内容有什么。Data Stores tab会显示所有已登记的全体store对象，都在StoreMgr里面。另外它还会显示当前有多少记录加载到每个Store之中。