Sencha中文后援会

www.ajaxjs.com 前Ext中文站since 2006,面向JavaScript中文社区


Ext的Examples目录提供的例子达一百多个。例子基本上涵盖了框架内的所有功能,很多用户一接触Ext之时便是从提供的例子开始尝鲜的,能好好地分析一下这些例子,对掌握Ext会有很大的帮助。下面八十多个的例子以3.0正式版为准。分类快速连接:
例子所说的一些方法和技巧,在整个Ext宝库中里仅仅是一部分,为引导初学者入门,只能就一些最基础的最常用的方法和技巧向读者做个梗概介绍。需要全面并完整学习Ext的用户可以阅读以下两本图书:


《ExtJS 3详解与实践》
《Ext详解与实践》
《AIR完整入门与开发实录》

组合示例

Feed Viewer 2.0

RSS 2.0 feed reader演示了可交换Reader面板的布局。本例是学习Ext布局的一个很好的例子。例子使用到了TreePanel、GridPanel和TabPanel等组件,而且是通过扩展的方式来使用的。在例子里还可以学习如何动态调整布局。

Simple Tasks 2.0

AIR环境下运行的个人日程管理的小软件。需要Adobe AIR的运行环境。Ext可以在AIR中与桌面级的应用无缝结合。

Simple Tasks

个人信息化管理程序使用了Google Gears作为储存方案。

Image Organizer

通过例子可以学习到如何将DataView的数据拖动到树节点上。在例子中有一个很好的扩展ImageDragZone,其作用是允许DataView通过在拖动时显示图片的缩略图。本例主要是DataView的应用例子。通过例子可以学习到如何将DataView的数据拖动到树节点上。在例子中有一个很好的扩展ImageDragZone,其作用是允许DataView通过在拖动时显示图片的缩略图。

Web Desktop

本例主要是学习在页面中如何控制Window,以及在Window中使用Grid、Accordion Layout相关一系列插件的功能。在例子中基本都是使用扩展方式创建窗口对象的,对学习如何编写扩展是一个非常好的例子。

Ext论坛

用Ext做一个论坛。

Ext文档中心

文档中心本身也算一个例子吧。

组合示例

Key Feed Viewer 2.(实验品)

敲键盘就可以控制复杂的布局。

ARIA Tree (实验品)

在Tree面板中实ARIA。


Grids

简单的数组

BasicGird演示了两种功能:1、本地数据作为数据源;2、自定义全的渲染器。
通过该例子可以学习到如何使用数组作为数据源创建Grid。在例子中值得注意的地方是如何通过参数renderer定义单元格的显示格式。

可编辑的Grid

Editable Grid演示了可编辑的三种功能:1、XML格式数据;2、丰富的编辑器;3、自定义记录。
本例主要用来学习EditorGridPanel的使用方法。在例子中定义了Ext.grid.CheckColumn这个插件,其主要作用是在网格中显示一个Checkbox,并可通过单击修改数据值。这个插件在Grid开发中非常实用,需要好好掌握。

行编辑器Grid (New)

这种类型Grid允许用户同一时间编辑整行的数据,同时也演示了Ext.chart功能。

XML Grid

一个简单XML的数据源。本例主要学习如何使用XML文件作为数据源创建Grid。

分页

带有分页、跨域和自定义展开行渲染器功能的Grid。本例主要学习如何使用分页工具条以及如何使用JSON格式数据作为数据源创建Grid。本例还介绍了如何通过GridView显示额外的数据。

进度条例的分页 (New)

一个整合进度条的分页工具检的插件。

滑动杆状的分页

一个整合滑动杆的分页工具检的插件。

分组

将数据按照特定的关系,分为若干可闭合的组,可在头部的“Group By”菜单改变其关系。本例主要介绍了如何使用GroupStore在Grid中进行数据分组,可通过头部菜单中的"Group By",将Grid里的数据划分为若干组,可闭合的组别。

分组实时摘要

高级的分组Grid,功能包括:1、单元格编辑;2、动态摘要计算。本例在使用GroupStore分组的基础上学习如何进行统计,它是分组Grid的高级应用,可以做单元格编辑和即时的统计计算。

Grid插件

混合插件的多种:可展开行,单选控件和行序号。本例主要介绍了RowExpander、CheckboxSelectionModel和RowNumberer等3个插件。RowExpander的作用是在Grid的固定列显示一个展开按钮,该按钮一行可显示更多数据。CheckboxSelectionModel的作用是在Grid的固定列显示一个Checkbox,通过Checkbox可选择行。RowNumberer的作用是在Grid的固定列显示行号。

始于Markup的Grid

自定义的GridPanel扩展,使得可以将普通的HTML表格立即转换为一个动态grid。

数据绑定(简易版)

在Grid与资料面板之间的数据绑定,中间者是Grid的RowSelectionModel。本例主要学习如何在Grid的rowselect事件中将所选记录显示在Panel上,通过Grid的RowSelectionModel实现grid与预览面板之间的数据绑定。

数据绑定(高阶版)

重构简易版的例子成为一个基于类的设计思维的例子。本例学习如何通过扩展的方式(自定义类Class),在Grid的rowselect事件中将所选记录显示在Panel上。这是数据绑定初级版本的重构版,使用基于类的设计方法。

缓冲式的GridView (New)

只渲染可看得到的Grid优化方案。

Editable Grid with Writable Store 新的服务端交互方式 (New)

使用JsonWriter的REST风格的Store,自动生成到后台的CRUD请求,封装在标准的HttpProxy对象中。

RESTful Store REST风格的Store (New)

使用JsonWriter的REST风格的Store,自动生成到后台的CRUD请求。

Tabs

简单tab

最简单tab的功能有:autoHeight、始于HTML的转化与Ajax加载事件。

高阶版tab

高阶版tab有滚动,动态添加与右击菜单控件的菜单。本例介绍了如何设置tab标签使之可以滚动显示、如何在tab标签中加入图标、一个tab标签右键菜单插件(TabCloseMenu)和如何动态增加tab。

滚动菜单 (New)

在tab右方旁边出的微型菜单,也就是在TabPanel分隔栏右边添加一个额外的菜单。

Tabs组 (New)

如何设置一个垂直方向的tab例子。

图表

图表

不同图表的演示。

饼型图。

不同风格的对话框,确认,提示,询问,进度和等待的对话框,支持图标修改。

条状图表

条状图表的例子。

刷新数据

刷新数据的例子。

窗体

Hello World

窗体里面有一个简单的TabPanel。

MessageBox

不同风格的对话框,确认,提示,询问,进度和等待的对话框,支持图标修改。

Layout Window

窗体内嵌了一个BorderLayout,BorderLayout内嵌了一个TabPanel。一个窗体也可以定义一种布局,这里演示的是TabPanel布局,并介绍了如何在Window中使用Border Layout进行布局

Trees树

自动排序的拖放

TreePanel透过JSON TreeLoader异步的产生节点并演示了自动化排序的拖放,并演示了容器内的拖放。

多树并列

不同类型树之间的拖放。

列状的树

通过现有的组件扩展而成的树组件。在例子中定义了Ext.tree.ColumnTree和Ext.tree.ColumnNodeUI两个扩展。

XML Tree Loader

演示了如何以XML文档作为树的一种实现。在例子中定义了Ext.ux.XmlTreeLoader这个扩展。

Check Tree(New)

结合Checkbox到选区的Tree。

布局管理器

Layout Browser (Updated)

包合各种例子的演示,有标准Ext布局、不同制定的布局和组合布局,复杂的的实现一个布局浏览器,是学习布局非常好的例子。在例子中可以学习到各个布局类的使用方法并能很直观地看到它们的实际显示效果。应该特别注意的是,通过例子可学习如何使用CardLayout切换显示,例子中不同的面板就是通过Cardlayout切换的。

Border Layout

可以嵌入多个组件和子布局的较复杂的BorderLayout。一个复杂的Border布局实现,内嵌有多个子布局和多个组件。在例子中除了可以学习到Border Layout的使用外,还可以学习到accordion和PropertyGrid的使用方法。

定位式布局

在一个可自由拖动大小的窗体置入固定的表单字段。通过例子可以学习到如何使用AnchorLayout控制组件的宽度和高度。

门户例子

为web门户界面服务的几个自定义扩展,类似于门户介面的页面布局,用了不同的扩展,包括Ext.ux.Portal、Ext.ux.PortalColumn和Ext.ux.Portlet等3个扩展及其使用方法。

ComboBox

基础的ComboBox

简单的、经由HTML与自定义的列渲染而成的combos,附有各项的提示功能,包括使用Store作为ComboBox的数据源、定制ComboBox列表项的显示、直接使用数组作为数据源、如何将已存在的Select元件转换为ComboBox、如何在EditorGridPanel中使用ComboBox和如何在ComboBox中使用模板和Ajax等6个例子。

ComboBox的模板

介绍了如何在ComboBox中使用模板定制显示和通过Ajax获取数据,基于模板和列渲染扩展,附有远程载入和分至的功能。

表单

动态表单

各式的表单例子,如闭合式的fieldsets控件,列布局和嵌入式的TabPanels和更多。

用Ajax定义表单

远程加载而来的表单,提交时让服务端验证。

制定搜索栏

组合和自定义的结果显示的搜索栏基于XTemplate切换字段的控件。

Grid与Form之间的绑定

介绍了将Grid与Form绑定的方法,是学习如何处理Grid的rowselect(行选择)事件与From如何加载数据的好例子,就是Grid选取的行后在表单FormPanel显示对应数据的例子。例子中还可以学习到如何定制Grid单元格的显示格式

高级表单验证

使vtypes验证表单。例子提供了日期范围校验和密码校验两个校验方法。

Checkbox/Radio Groups

新添加了Checkbox/Radio组的例子,本例就是学习如何使用这些新控件的。

文件上传控件

用一个特定CSS类将一个标准的上传字段添加上些少Ext的风格。介绍了Ext.form.FileUploadField这个扩展及其使用方法。扩展Ext.form.FileUploadField解决了Ext 2.2版之前上传组件的界面问题。如果要在应用中实现上传功能,要好好地学习这个例子。

多选和单项选

介绍表单中列表项的Ext.ux.Multiselect和Ext.ux.ItemSelector两个扩展及其使用方法。扩展Ext.ux.Multiselect和Ext.ux.ItemSelector解决了Form控件中缺少多选控件的问题

微调字段 (New)

自定义微调的小器件。

工具条和菜单

简单的工具条 (Updated)

工具条的菜单包含了不同的组件,如日期选择控件,颜色控件,子某素和其它。在许多组件中都有工具栏与菜单的身影,如date pickers, color pickers, sub-menus等等。

溢出的工具条 (New)

使用工具栏的附加工具栏来增加按钮到Ext.menu对象上面,支持动态的溢定工具条按钮。

分组的工具条按钮 (New)

工具条中的分组按钮。

Ext动作

将多种按件(按钮、工具条的菜单项)的功能归于Ext.Action类的定义。

状态条

可放于任何面板底部的状态条,可置入图标。

高级版状态条

通过插件创建自定义的状态条,可以在验证表单的时候发挥作用。

Templates与DataView

Templates

介绍了Templates和XTemplate类的基本使用方法,演示如何将数据与模板绑定在一起。

DataView

简单DataView的控件,有针对可编辑标签和施动子项的插件。简单的DataView应用,有制定的插件用于可编辑lable与拖动选中项目,分别是LabelEditor和DragSelector两个扩展。LabelEditor的作用是允许直接编辑图片的标题。DragSelector的作用是允许通过拖动鼠标选择图片。

DataView(高阶)

制定的DataView可支持:1、排序;2、多模版切换。这是DataView控件的进阶版。本例介绍了一个图片插入对话框,其中可以学习到如何过滤DataView的数据、如何对数据进行排序以及selectionchange事件和dblclick事件的使用方法。

ListView (New)

表格状的DataView,犹如一个轻型的Grid,有较好的性能,可充当轻型的角色。

拖放

Grid之间的拖放

简单的Grid与Grid之间的拖放。写一个扩展,可以实现DataView与Grid之间拖放。学习的重点是Grid数据的插入与删除。

Grid与表单之间的拖放

简单的Grid与formPanel之间的拖放。介绍了如何将Grid的数据拖放到Form,学习重点为数据的处理。

DD on Form & Grid (New)

表单与Grid之间的拖放例子。

制定的拖放

使用DragZone与DropZone扩展实现DataView与grid之间拖放。

Direct

Direct (New)

Remoting与Polling的例子。

Direct Form (New)

利用Ext.Direct的表单。

图表 (New)

利用Ext.Direct的Tree。

杂项

History

让用户可以在中利用浏览器“前进/后退”提供导航的功能,这就是历史管理器。A History manager that allows the user to navigate an Ext UI via browser back/forward.

Google地图

Google地图封装了Ext面板与窗体的地图类。

滑动杆

滑动杆,支持水平模式,提示式,自义模式和更多。

QuickTips (Updated)

不同方式的提示配置项,用于加载和鼠标跟踪。

进度条

演示了进度条其不同应用和风格。

面板 (Updated)

简单的可闭合面板。

图表 (New)

这是直线与条状图表的例子。

可缩放

将某个元素依据不同的配置项设定,产生可缩放的功能。

Spotlight (New)

遮照页面中的大部份元素只高亮某个元素以突出该元素。

按钮 (New)

调试命令台 (Updated)

本地化(静态)

引入一个本地的脚本演示完整的本地化工作。

本地化(动态)

可通过下拉列表中的各种本地化方案动态渲染组件。

Tabs组 (New)

如何设置一个垂直方向的tab例子。

图表 (New)

这是直线与条状图表的例子。