本文将会讨论如何把一个对象转换为JSON并将其发送到服务器。
編輯 使用Ext.urlEncode进行URL编码

首先我们看看Ext.urlEncode 这个方法（相对应的是Ext.urlDecode解码方法）。 Ext.urlEncode()不能用来处理JSON，Ext.urlEncode()只是负责在HTTP进行GET、POST请求时，将某个“普通的” 对象转换成名称/值（name/value）的状态。我这里说“普通”的意思是urlEncode只是将第一层属性编码，———数组自然没有问题但内嵌的对象就不行了。 举例：

如果你只是想纯粹地发送一些的请求，可把参数写成JavaScript原生对象的形式，然后用这个方法编码urlEncode发送，———这是较方便的做法。

例如，你可以在一个GET请求的URL后面加上一段文本字符：

* 请求是这样的:

你也可以同POST请求发送这样的内容：

* 请求是这样的:

* POST内容：

这一切还顺利，但说到要发送和接受JSON，该怎么办呢？接下来再看！
編輯 使用Ext.encode编码JSON

Ext.encode() （其对应的解码方法为Ext.decode）转换一个复制的对象为一段JSON字符举例：

刚才是我们转换一个简单的对象到名称/值（name/value）的状态，现在的情况将有所不同，此时的对象已经被转换到（序列化）一段参数。具体的作用是，以名称/值（name/value）的形式，发送到服务器解析。如果只是发送一个JSON字符串，可认为这个就是json参数。

要将JSON转换成为可GET/POST适合发送的名称/值（name/value）状态，你可以额外地将其编码：

urlEncode()方法也是可以：

在EXT 1.1,你可以轻松地使用Ext.Ajax.request()方法来创建一个典型AJAX的请求。该方法允许传入一个配置项的对象，即是可包含其它类型的内容，作为请求的参数的用途，下面引用API的介绍：

（原文）params {Object/String/Function} (Optional) An object containing properties which are used as parameters to the request, a url encoded string or a function to call to get either.

（中文）params {Object/String/Function} (可选项) 包含请求参数的对象，以对象的属性形式出现，一段可url编码的字符串，或者是可返回以上两者的函数。

对于传入的是object类型， Ext.Ajax.request会调用Ext.urlEncode()将其转换为名称/值（name/value）的状态（通常情况忽略内嵌的对象）。

请求是这样的：

* 如不禁止disableCaching，Ext会加上唯一的_dc参数以消除缓冲。
* 每次送出的数据都是经过Ext.urlEncode()，很明显是没有发送完整的JSON,只是一连串的名称/值（name/value）的状态。

如果使用POST的方法，过程也是相同，区别是名称/值（name/value）的状态是放在POST BOBY内发送。

要把JSON发送到服务器，我们需要使用Ext.encode()方法转换数据对象到文本格式的JSON。 Ext.Ajax.request()允许传入一段可URL编码的字符串，所以你既可以用 encodeURIComponent()编码参数，亦可直接是一个简单的对象，让Ext.Ajax.request()为你编码：

相类似地，服务端会解析为：

这样我们便可以访问JSON已解码的数据了。

1、中文化问题，在 ext-all.js 后面，挂上 ext-lang-zh_CN.js 即可，如：

：

参照这个可以修改出自己想要的登录页面，我就是参照这个页面，修改了系统的登录界面

下载Ext

如果你未曾下载过，那应从这里下载最新版本的Ext http://extjs.com/downloads。

针对你的下载需求，有几个不同的弹性选项。通常地，最稳定的版本，是较多人的选择。下载解包后，那个example文件夹便是一个探索Ext的好地方！

开始！

我们将使用Ext，来完成一些JavaScript任务。

第一步要做的是，下载本教程的示例文件。Zip文件包括三个文件：ExtStart.html, ExtStart.js和ExtStart.css。解包这三个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“tutorial”。双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtStart.js看看：

Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后，保证页面内的所有元素能被Script引用（reference）。你可删除alert()那行，加入一些实际用途的代码试试：

Ext.onReady(function() {
alert("Congratulations!  You have Ext configured correctly!");
});

Element：Ext的核心

大多数的JavaScript操作都需要获取页面上的某个元素（reference）,好让你来做有趣的事情。传统的JavaScript方法，是通过ID获取Dom节点的：

var myDiv = document.getElementById('myDiv');

这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太强大和好用。为了要用那节点干点事情，你将会要写不少自定义的代码；另外，对于不同类型浏览器之间的差异，要你处理起来可真头大了。

进入Ext.element对象。元素（element）的的确确是Ext的心脏地带，--无论是访问元素（elements）还是完成一些动作，都要涉及它。Element的API是整个Ext库的基础，如果你时间不多，只想了解Ext中的一个类的话，Element一定是首选！

由ID获取一个Ext Element如下（首页ExtStart.htm包含一个div，ID名字为“myDiv”，然后，在ExtStart.js中加入下列语句）：

Ext.onReady(function() {var myDiv = Ext.get('myDiv');});

再回头看看Element对象，发现什么有趣的东东呢？

• Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。）；
• Element.get()方法内置缓存处理（Cache)，多次访问同一对象效率上有极大优势；
• 内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。

这意味着你可用最小的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在ElementAPI中）。

继续在ExtStart.js中，在刚才我们获取好myDiv的位置中加入：

myDiv.highlight();      //黄色高亮显示然后渐退
myDiv.addClass('red');  // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center();         //在视图中将元素居中
myDiv.setOpacity(.25);  // 使元素半透明

获取多个DOM的节点

通常情况下，不能由ID获取多个DOM的节点，有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下，你会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一个功能异常强大的Dom Selector库，叫做DomQuery。

DomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context）获取多个元素，然后通过Element接口调用。幸运的是，Element对象本身便有Element.selcect的方法来实现查询，即内部调用DomQuery选取元素。这个简单的例子中，ExtStart.htm包含若干段落（

标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：

// 每段高亮显示
Ext.select('p').highlight();

DomQuery的选取参数是一段较长的数组，其中包括W3C CSS3 Dom选取器、基本XPath、HTML属性和更多，请参阅DomQuery API文档以了解这功能强大的库的细节。

响应事件

到这范例为止，我们所写的代码都是放在onReady中，即当页面加载后总会立即执行，功能较单一——这样的话，你便知道，如何响应某个动作或事件来执行你希望做的事情，做法是，先分配一个function，再定义一个event handler事件处理器来响应。我们由这个简单的范例开始，打开ExtStart.htm，编辑下列的代码：

Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});

加载好页面，代码依然会执行，不过区别是，包含alert()的function是已定义好的，但它不会立即地被执行，是分配到按钮的单击事件中。用浅显的文字解释，就是：获取ID为'myDottom'元素的引用，监听任何发生元素被单击的情况，并分配一个function,以准备任何单击元素的情况。

正路来说，Element.select也能做同样的事情，即作用在获取一组元素上。下一例中，演示了页面中的某一段落被单击后，便有弹出窗口：

Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});

这两个例子中，事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。下一例等效于上一例：

Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});

到目前为止，我们已经知道如何执行某个动作。但当事件触发时，我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢？要明确这一点非常简单，Element.on方法传入到even handler的function中（我们这里先讨论第一个参数，不过你应该浏览API文档以了解even handler更多的细节）。在我们之前的例子中，function是忽略这些参数的，到这里可有少许的改变，——我们在功能上提供了更深层次的控制。必须先说明的是，这实际上是Ext的事件对象（event object）,一个跨浏览器和拥有更多控制的事件。例如，可以用下列的语句，恢复这个事件的指定的DOM节点：

Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});

注意指定的是DOM节点，所以我们首先将其恢复成为适当的元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。

这篇教程中，我们将学习使用Ext的菜单器件（Menu Widgets)。假设读者已经阅读过Ext简介一文，并懂得一些Ext的基本相关知识。菜单器件是Ext库中较迟实现的器件。它由几个类联合构成，使得创建一个菜单只需若干代码块（Block of code）。

开始！

第一步要做的是，下载本教程的示例文件。Zip文件包括三个文件：ExtMenu.html,、ExtMenu.js、ExtMenu.css、和list-items.gif。解包这四个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“menututorial”。双击ExtMenu.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtMenu.js看看：

Ext.onReady(function() {
alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!");
});

在Ext的介绍中，我们讨论过使用Ext的原因和Ext.onReady()函数的功能。

创建简易的菜单

先看看怎么做一个基本的菜单，然后再讨论代码中的各个组件和知识点。加入下列代码到onReady函数中:

var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到按钮
}
]);
function clickHandler() {
alert('Clicked on a menu item');
}
function checkHandler() {
alert('Checked a menu item');
}

各种Item的类型

属性“items”可能是最重要的属性当中的一个。留意一下语法其实我们是将一个数组作为值（value)传到属性中去。数组里的数据就是我们想要在菜单中出现的每一项。每本例中我们放了六个菜单项，但何解每项的语法（Syntax）都不尽相同呢？第一项是一串Object Literal，包含一组我们可配置的name/value。Ext的底层库会为这串Object Literal按其配置默认地创建item对象。接着第二项是Item对象本身，后面跟着分隔符，最后两个是单选框项。整个过程演示了Ext Widget如何动态的运行。下例各项可填入到数组中：

{text: 'Foo'}                       // Ext 转换这个配置对象到menu item
'Straight Text'                     //文本或原始html (纯文字)
'-'                                 // 创建分隔符
new Ext.menu.Item({text: 'Foo'})    // 创建一个标准item (同{text: 'Foo'})
new Ext.menu.CheckItem()            // 创建单选框item
new Ext.menu.DateItem()             // 创建menu内置的日历控件
new Ext.menu.ColorItem()            //创建一个颜色采集器
new Ext.menu.BaseItem(document.getElementById('my-div')) //允许你加入任何元素

Item属性

Item接受什么类型的属性呢？本例中我们使用了这两属性：

text: 'An item',
handler: clickHandler

第一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函数（event handler function）。本例中我们将函数clickHandler()和checkHandler()定义在代码的最后。作为演示用途，这仅仅是用alert()通知你有一个单击的消息。
其它有用的属性是：

cls: 'a-class-name'  ,       // 为标准Item手动设置样式和图标ICON
icon: 'url',                 // 如不想用CSS,可直接设置图标的URL
group: 'name of group',      //只适用多选项，保证只有一项被选中

完整的item属性列表在Menu Item文档中。

在UI中摆放菜单

So,创建好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆放到页面中呢?在UI中一个menu可以分配到多个位置（同一个对象，不同位置多次使用），这正是Ext如此强大的原因：每一个器件（widget）切成“一块一快”的类，来构建整个面向对象的动态结构（Structure）。这意味着menu可用于不同的场合。我们可将menu放到有按钮的toolbar中，或用页面中的一个按钮来展开menu，甚至可在Ext的其它器件中（widgets）使用menu作为上下文菜单（Context Menu）。

本例中分配一个menu到toolbar中：

var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到toolbar
}
]);

Ext.Toolbar构建函数接受两个参数，第一个是指定toolbar的容器（contrainer）；第二个参数是包含全部按钮的数组。这里,我们只使用一个按钮,正如所见，按钮实质上是一串由数组组成的Object Literal,同时这个Object Litetal亦包含了不同的属性。下面是一组按钮对象的Object Litetal属性：

cls: 'a-class-name'  ,      //手动设置样式和图标ICON
icon: 'url',                // 如不想用CSS,可直接设置图标的URL
text:'Our first Menu',      // 按钮提示之文字
menu: menu                  // 可以是menu之id或配置对象

Menu的分配方式：

刚才谈到如何分配Menu到工具条中（toolbar），继而亦讨论menu分配的不同方式，看看有关的细节是怎样的。So,因为menu属性可以以不同方式地分配，即是可以赋予一个menu对象，或是已经建好的menuID，或直接是一个menu config对象。你应该有机会就尝试一下以多种方式创建menu，因为类似的方式方法在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一样的效果，唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单击了。可以的话，把下面的代码也加入到onReady函数中，亲身体验一下：

var dateMenu = new Ext.menu.DateMenu({
handler : function(datepicker, date){
alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.Menu({
id: 'colorMenu', // the menu's id we use later to assign as submenu
items: [
new Ext.menu.ColorItem({
selectHandler: function(colorpicker, color){
alert('Color Selected', 'You chose: ' + color);
}
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: {
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
}, {
text: 'Another item',
handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
}),
'-', {
text: 'DateMenu as submenu',
menu: dateMenu, // assign the dateMenu we created above by variable reference,
handler: date
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu'    // we assign the submenu containing a ColorItem using it's id
}
]
}
}
]);
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}

注意：留意几种不同的方法加入子菜单！还有even handing函数和Coloritem、DataMenu匿名函数之间的区别。

练一练

Ok我们用上述的方法，创建了toolbar和menu，看起来应该是这样的：

上文提及menu可摆放在UI的任何位置，这里将为你演示menu如何与Toolbars、MeneuButtons、Context Menus's配合工作，包括一些有用的方法和动态添加的功能。

new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});

动态添加菜单按钮到Toolbar

这条Toolbar有两个按钮。一个分隔符，和一个纯图标的按钮（附Quicktips）。你可尝试这样做，把zip文件中.gif加入

Ext.QuickTips.init();
tb.add('-', {
icon: 'list-items.gif', //图标可单行显示
cls: 'x-btn-icon',      // 纯图标
tooltip: 'Quick Tips
提示文字'
});

更方便的是

一些代码片段，有助你提高效率，留意注释！

// Menus更多的API内容
// 动态 增、减元素
menu.addSeparator(); //动态加入分隔符
var item = menu.add({
text: 'Dynamically added Item'
});
// items 完整支持Observable API
item.on('click', onItemClick);
// items can easily be looked up
menu.add({
text: 'Disabled Item',
id: 'disableMe'  // <-- 设置ID便于查找lookup
// disabled: true   <-- 先不disabled 而采用下面的方式
});
// 用 id 或 index访问
menu.items.get('disableMe').disable();

下一步是

现在你已经了解菜单组件是如何工作了。下面的资源有助您进一步更深入学习菜单：

除了我们已经讨论过的核心JavaScript库，现在的Ext亦包括了一系列的最前端的JavaScirptUI组件库。文本以一个最常用的widget为例子，作简单的介绍。

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。
在上面的paragraphClicked的function中，将这行代码：

Ext.get(e.target).highlight();

替换为：

var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});

这里有些新的概念讨论一下。在第一行中我们创建了一个局部变量（Local Variable）来保存某个元素的引用，即被单击的那个DOM节点（本例中，我们总是段落paragrah,事因我们已经定义该事件与<p>标签发生关联的了）。为什么要这样做呢？嗯...观察上面的代码，我们需要引用同一元素来高亮显示，在MessageBox中也是引用同一元素作为参数使用。
一般来说，多次重复使用同一值（Value）或对象，是一个不好的方式，所以，作为一个好的OOP开发者，应该是将其分配到一个局部变量中，反复使用这变量！

现在，观察MessageBox的调用，准备作为阐述新概念的演示用。乍一看，这像一连串的参数传入到方法中，但仔细看，这是一个非常特别的语法。实际上，传入到MessageBox.show的只有一个参数：一个Object literal,包含一组属性和属性值。在Javascript中，Object Literal是动态的，你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的name/value组成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经常遇到这种模式的语法，因此你应该消耗掉这知识！
使用Object Literal的原因是什么呢？主要的原因是“韧性（flexibility）"，随时可新增、删除属性，亦可不管顺序地插入。而方法不需要改变。这也是多个参数的情况下，为最终开发者带来不少的方便（本例中的MessageBox.show())。例如，我们说这儿的foo.action方法，有四个参数，而只有一个是你必须传入的。本例中，你想像中的代码可能会是这样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写，却是这样， foo.action({ param4: 'hello' })，这更易用和易读。

Gird

Gird是Ext中人们最想先睹为快的Widgets之一，也是最流行之一。好，让我们看看怎么轻松地创建一个Gird并运行。用下列代码替换ExtStart.js中全部语句：

Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
grid.render();
grid.getSelectionModel().selectFirstRow();
});

这看上去很复杂，但实际上加起来，只有七行代码。第一行创建数组并作为数据源。实际案例中，你很可能从数据库、或者WebService那里得到动态的数据。接着，我们创建并加载data store， data store将会告诉Ext的底层库接手处理和格式化这些数据。接着，我们定义一个column模型，用来轻松地调配Gird的每一列参数。最后我们生成这个Gird,传入data store和column模型两个对象，进行渲染并选好第一行。不是太困难吧？如果一切顺利，搞掂之后你会看到像这样的：

当然，你可能对这段代码的某些细节，并不完全掌握其中的含义（像MemoryProxy究竟是什么？）但先不要紧，这个例子的目的是告诉你，用少量的代码，创建一个富界面的多功能的UI组件而已——这是完全可能的，更多细节的内容，留给读者你自己学习吧。这儿有许多学习Grid的资源。Ext Grid教程、交叉Gird演示和Gird API文档。

还有更多的..

这只是冰山一角。还有一打的UI Widgets可以供调用，如 layouts, tabs, menus, toolbars, dialogs, tree view等等。请参阅API文档中范例演示。

使用Ajax

在弄好一些页面后，你已经懂得在页面和脚本之间的控制原理（interact）。接下来，你想知道的是，怎样与后台服务器（remote server）交换数据，常见的是从数据库加载数据（load）或是保存数据（save）到数据库中。通过JavaScript异步无刷新交换数据的这种方式，就是所谓的Ajax。Ext内建卓越的Ajax支持，例如，一个普遍的用户操作就是，异步发送一些东西到服务器，然后，UI元素根据回应（Response）作出更新。这是一个包含text input的表单，一个div用于显示消息（注意，你可以在ExtStart.html中加入下列代码，但这必须要访问服务器）：

<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />

接着，我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js中(用下面的代码覆盖)：

Ext.onReady(function(){
Ext.get('oKButton').on('click', function(){
var msg = Ext.get("msg");
msg.load({
url: [server url], //换成你的URL
params: "name=" + Ext.get('name').dom.value,
text: "Updating..."
});
msg.show();
});
});

这种模式看起来已经比较熟悉了吧！先获取按钮元素，加入单击事件的监听。在事件处理器中（event handler），我们使用一个负责处理Ajax请求、接受响应（Response）和更新另一个元素的Ext内建类，称作UpdateManager。UpdateManager可以直接使用，或者和我们现在的做法一样，通过Element的load方法来访问（本例中该元素是“msg“的div）。当使用Element.load方法，请求（request)会被加工处理后发送，等待服务器的响应（Response），来自动替换元素的innerHTML。简单传入服务器url地址，加上字符串参数，便可以处理这个请求（本例中，参数值来自“name”元素的value),而text值就是请求发送时提示的文本，完毕后显示那个msg的div（因为开始时默认隐藏）。当然，和大多数Ext组件一样，UpdateManager有许多的参数可选，不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。

<? if(isset($_GET['name'])) {
		echo 'From Server: '.$_GET['name'];
	}
?>

protected void Page_Load(object sender, EventArgs e)
{
	if (Request["name"] != null)
	{
		Response.Write("From Server: " + Request["name"]);
		Response.End();
	}
}

<cfif StructKeyExists(url, "name")>
	<cfoutput>From Server: #url.name#</cfoutput>
</cfif>

最后一个关于Ajax的谜题就是，服务器实际处理请求和返回（Resposne）的具体过程。这个过程会是一个服务端页面，一个Servlet，一个Http处理器，一个WebService,甚至是Perl或CGI脚本，即任何一个服务器都可以处理http请求。无法预料的是，服务器返回什么是服务器的事情，无法给一个标准的例子来覆盖所有的可能性。(这段代码输出刚才我们传入'name'的那个值到客户端，即发送什么，返回什么）。

使用Ajax的真正挑战，是需经过适当处理过的手工代码，并相应格式化为服务端可用接受的数据结构。有几种格式供人们选择（最常用为JSON/XML)。正因Ext是一种与服务器中立的语言，使得其它特定语言的库亦可用于Ext处理Ajax服务。只要页面接受到结果是合适的数据格式，Ext绝不会过问服务器的事情！要全面讨论这个问题，已超出本文的范围。推荐正在使用Ajax的您，深入阅读Ext Ajax教程。

概述: 本例将会带你进入Grid分页的世界

原文作者：Shea Frederick 出处

参考图：

读者应先下载本例涉及的示范代码。这里是一个已经完成好的例子。

Gird数据

Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。

本例中的服务端语言是PHP,数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser")
or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];
$rs_count = mysql_query($sql_count);
$rows = mysql_num_rows($rs_count);
$rs = mysql_query($sql);
while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}
Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';

由于每个后台开发的环境都不尽相同，所以这里的服务端代码就不细究了。

怎么做一个分页的Grid

本例采用的是ScriptTagProxy，原因是 范例代码 和 服务端代码 不是在同一个服务器上（译注：即“跨域”），而大多数的情况是，在同一个服务器上得到数据，直接用HttpProxy就可以了。

使用DataStore与平时唯一不同的地方，便是需要设置totalProerty属性。本例中，我们从服务端的脚本计算出“total”这个值，告诉DataStore总共有多少个记录，这里指的是所有的记录数。

var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'employee_name', mapping: 'name'},
{name: 'job_title', mapping: 'title'},
{name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
{name: 'is_active', mapping: 'active'}
])
});

分页栏Toolbar

这里加入一个分页栏到Grid的面板中，--差不多完成喽。

var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});

最后传入start和limit参数以初始化数据。

ds.load({params:{start:0, limit:25}});

花时间较多的地方是，在后台如何生成数据，以配合Grid的运作，一旦这些工作OK后，分页Grid再不是一件难事了。

本文涉及的范例代码，可以在这里下载。一个完成好的例子可在这里找到。

步骤一 定义数据(Data Definition)

首先要让Grid知道XML文档定义了每一行是什么数据。正如所见，我们命名了"item"在下面的XML样本中。

单行的XML样本数据

<Item>
<ASIN>0446613657</ASIN>
<DetailPageURL>http://www.amazon[*SNIP*]JVQEG2</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Are You Afraid of the Dark?</Title>
</ItemAttributes>
</Item>

接着需要定义某一列为“统一标识（Unique Identifier）”,即ID,根据“id"所设置的那个节点来读取值（样本代码第九行）。本例中的样本数据是”ASIN"列。

数据定义的最后部分就是指定你需要显示的字段(Fields),把这些字段放到一个数组之中，并保证这些字段与你的XML数据中元素名称是一致的，而且还要注意先后顺序，这里的顺序不需要和XML文件中顺序一致。

    var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}),
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN'
}, [
'Author', 'Title', 'Manufacturer', 'ProductGroup'
])
});
 

步骤二 列模型（Column Model）

下一步便是定义Column Model 列模型。简单地说，就是通过一些属性的设置，决定每一列怎么控制或怎么显示，这是一个由每列的配置参数组成的数组。注意，出现的顺序应该与刚才定义“字段”的数组一致。较常见的参数通常是header和width，所以你会觉得这两项是必须要设置的，然而宽度（width）其实不总是需要的，因为稍后我们将使用autoWidth/Height来代替。

列模型样本

	var colModel = new Ext.grid.ColumnModel([
{header: "Author", width: 120, dataIndex: 'Author'},
{header: "Title", width: 180, dataIndex: 'Title'},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
]);

最后是将DataStore和Column Model两样东西传入到Grid，渲染结果，然后加载来自DataStore的数据，这些就是你让Grid工作起来的所有因素！

进行渲染！

    var grid = new Ext.grid.Grid('mygrid', {
ds: dataStore,
cm: colModel
});
grid.render();
dataStore.load();

一、加载一个同步Tree:

var TreeTest = function(){

var Tree = YAHOO.ext.tree;// 快捷方式



return {

init : function(){

var tree = new Tree.TreePanel('tree_div', {//需要一个tree_div的holder

animate:true, //是否动画

loader: new Tree.TreeLoader({dataUrl:'get_nodes.asp'}), //调用一个JSON

enableDD:false,// 是否支持拖放

containerScroll: true

});



// 设置根节点

var root = new Tree.AsyncTreeNode({

text: 'Frank的作品',  //根节点文字

draggable:false, //根节点是否可拖放

id:'source'

});

tree.setRootNode(root);
// 渲染 tree

tree.render(false,false);

// false for not recursive (the default), false to disable animation

root.expand(false,false);

}

};

}();

YAHOO.ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

通过XHR调用这个get_nodes.asp文件，假设服务器返回这样一个JSON(有关JSON的介绍:http://www.json.org/json-zh.html)：

[{
"text":"yui-ext.js","id":"\/yui-ext.js","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1118.php","id":"\/yui-ext-1118.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1228.php","id":"\/yui-ext-1228.php","leaf":true,"cls":"file"
} ,{
"text":"build","id":"\/build","cls":"folder"
} ,{
"text":"source","id":"\/source","cls":"folder"
} ,{
"text":"yui-ext-1123.php","id":"\/yui-ext-1123.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1203.php","id":"\/yui-ext-1203.php","leaf":true,"cls":"file"
} ]

var goods = new dbOpen();
goods.GetSQL ="select * from goodsbigclass";
with(goods){
GetRS(1);
var str="";
str+="[";
do{
str+='{"text":"'+rs("BigClassName")+'","id":"\/yui-ext.js","leaf":true,"cls":"file","href":"?b_id='+rs("BigClassID")+'"},';
rs.MoveNext();
}while(!rs.EOF);
str+="]";
Response.Write(str);
Close();
}
goods= null;

解释：
“text”-->显示的文本
"id"-->id值
“leaf”-->Boolean值，如果“叶子”是真的话，则不能包含子节点Children nodes
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的url，还有一个”hrefTarget“的属性
另外，除了以上的属性，您还可以在JSON加入任何的属性，作为节点的属性，见Jack原话：
The href attribute is called "href", there's also an "hrefTarget" attribute. For capturing node clicks, you can listen on individual nodes or you can listen for "click" on the tree which will pass you the node that was clicked. FYI, you can put any attributes you want in the json config for the node and it will be available as node.attributes. FAQ.4会继续解释这个问题。
FQA常见问题：

1.Tree支持XML数据交换吗？
A:暂不支持，据FOURM上的话，以后会提供支持，见：
can I use xml instead of json for sending nodes hirerachy ？
Correct me if I'm wrong but I think the answer is no here. But that doesn't mean it won't be supported later on.

2.我想用单击代替双击展开子节点，可以吗？
A:可以，见：

tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});

3.事件处理的几种情形：
A: a.当加入某个节点时，为其增加事件

tree.on('append', function(tree, node){
if(node.id == 'foo'){
// 这里加入你的事件（如click）侦听器（addListener()）
}
});

b.针对某个节点的单击事件

tree.on('click', function(node){
if(node.id == 'foo'){
// do something
}
});

c.针对某个区域（集合）的事件

// fires any time the selection in the tree changes
tree.getSelectionModel().on('selectionchange', function(sm, node){
if(node && node.id == 'foo'){
// do something
}
});

4.如何获取JSON中的自定义字段（或称作参数 parameters）
A:JSON对象已经被构建函数 construction传递到TreeNode中，作为node.attributes 出现，所以调用属性node.attributes 便可获取。详见：http://www.yui-ext.com/forum/viewtopic.php?t=2253

tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});

下面将介绍如何异步取一棵树的所有节点，具体做法与官方同步取节点有很大不同，尤其在json的id属性上，下面是我一些摸索，可能不是最佳方案，有待大家一起研究。

异步取节点的思路是这样的：
1、先定义一个初始化节点（也可以不定义，看个人需求）
2、yui-ext根据该节点id请求服务器，获得子节点各属性
3、循环

特点：可以在上一级目录中，在服务器端预先将该节点是否有子节点读好（json中的isLeaf属性），虽然但数据库将多承担一些压力，但用个count(*)不会造成太大负担（除非查询条件异常复杂），也可以不读，即把所有isLeaf设置为false。


问题：
1、目前还无法进行reload，即每次打开节点都重新读取一次
2、样式还有些问题，无法通过node. childNodes[i]设置子节点的style，所以无法改变最后一级元素的style（也许是通过别的途径改变style的？）

示例：
先给出一段js代码，可以结合官方的demo（http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html）看看：

//定义根id的变量
var rootId = 1;
var TreeTest = function(){
// shorthand
var Tree = YAHOO.ext.tree;
return {
init : function(userName){
var tree = new Tree.TreePanel('detailTree', {
animate:true,
//这个dataUrl是初始化树所用的url，你也可以不写或定义一个静态json文件，还可以什么都不写全部依赖于第二个url自动产生，视具体需求而定
loader: new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId='+rootId}),
enableDD:true,
containerScroll: true
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'yui-ext',
draggable:false,
id:rootId
});
tree.setRootNode(root);
//根据当前节点id，动态拼出请求服务器的路径
//每产生一个节点，指向一个事件的引用，将新建loader.dataUrl（具体事件的机制还需要再研究）
//注意调用函数是beforeload
tree.on('beforeload', function(node){
tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId='+node.id;
});
//这里演示一个自定义json的用法(description为自定义json的key)
//以及如何定义某节点的style(node.ui.textNode.style.title)
//具体可以看ui这个类
tree.on('beforeexpand', function(node){
node.ui.textNode.style.title = ‘red’;
alert(node.attributes.description);
});
// render the tree
tree.render();
// false for not recursive (the default), false to disable animation
root.expand();
}
};
}();

同时再分析一个json：
[{"text":"衣服类", 
"id":"5",     //注意：这里是该节点的id，拼连接时要用到，与官方的json有所不同
"leaf":true,
"cls":"file",
"description":"这里是衣服类"}]   //自定义只需要这样就可以了

给出java产生json的代码逻辑片断：

……
//list为由传入的id所求的category集合
List list=
findBy("parentId", new Long(parentId.toString()));
StringBuffer JSONStr = new StringBuffer();  //声明json
JSONStr.append("[");
for(CostCategory i : list){
boolean isLeaf = isLeaf(i.getId());  //isLeaf()为判断是否有以该id为parentId的节点，具体没有给出
String icon = isLeaf?"file":"folder";
String description = i.getCategoryDescription()==null?"":i.getCategoryDescription();
//{"text":"treedata.jsp","id":"treedata.jsp","leaf":true,"cls":"file"},
JSONStr.append("{\"text\":\""+
i.getCategoryName()+"\",\"id\":\""+
i.getId()+"\",\"leaf\":"+
isLeaf+",\"cls\":\""+
icon+"\",\"description\":\""+
description+"\"},");
}
JSONStr.deleteCharAt(JSONStr.lastIndexOf(","));
JSONStr.append("]");
System.out.println(JSONStr);
out.print(JSONStr);   //输出json
……

View如何工作？

记得以前如何输出一个记录吗？以网上商店为例子；以前是这样输出一个商品的：

<%
  .....
  //下列服务端代码为ASP using JScript（依然是JS，I'm a big JS Fan^^）
  var str ="";
  str+="<td><div id='title'>";
  str+=rs("title")+"<\/div>";
  str+="<img src="+rs("thumb_image")+">";
  str+="<\/td>"
  Resposne.Write(str);
  .....
%>
很明显，我们最终目的还是要输出HTML,为浏览器渲染(Render)服务。View工作原理也一样，只不过把以前Sever做的事情搬到Cilent来，依靠View来处理（实质上是Domhelper的模版），让浏览器最终渲染输出。

需要你的帮忙：Domhelper

如上述，View的工作离不开DomHelpr。DomHelpr在这里提供"模版Template",并将其编译。见下面代码：

//新建一个Template对象
var tpl = new YAHOO.ext.Template(    '<div class="entry">' +        '<a class="entry-title" href="{link}">{title}</a>' +       '<h4>{date} by {author} | {comments} Comments</h4>{description}' +    '</div><hr />');
tpl.compile(); //compile()的方法，可带来DOM性能的增益
var moreView = new YAHOO.ext.JsonView('entry-list', tpl, {
   jsonRoot: 'posts'
});
//又或者隐式创建Template对象
var view = new YAHOO.ext.View('my-element',
           '<div id="{0}">{2} - {1}</div>', // auto create template
           dataModel, {
              singleSelect: true,
              selectedClass: 'ydataview-selected'
           });

加载数据

VIEW加载数据的方式与JSONView的有所不同：VIEW采用DataModel的load(),JSONView采用UpateManager的load()。下面重点说说JSONView的load()方法：

 view.load({ url: 'your-url.php', params: {param1: 'foo', param2: 'bar'}, // 可以是URL encoded字符 callback: yourFunction, scope: yourObject, //(optional scope)  discardUrl: false,  nocache: false, text: 'Loading...',//loading之提示文字 timeout: 30,//超时 scripts: false });
只有url参数是不可缺省的，其它如 nocache, text and scripts都是可选的。 text和scripts是与UpdateManger实例关联的参数

params : String/Object
(optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
callback : Function
(optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
discardUrl : Boolean
(optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
JSONView使用点滴

a.有一个gird和JSONView,两者如何同时调用一个数据源？
1.改变jsonData属性; 2.Call refresh(); 见http://www.yui-ext.com/forum/viewtopic.php?t=1968

b.分页
分页视乎还没有什么好的方案，JACK只提供下面的思路：
JsonView extends View. View supports using a JSONDataModel. It won't render a paging toolbar for you, but it will loadPage() and standard DataModel functionality. The view will automatically update when you load new data. If you want named template parameters (like JsonView), you will need to remap the indexes (DataModel style) to named parameters. See the YAHOO.ext.View docs for more info on that.
http://www.yui-ext.com/forum/viewtopic.php?t=2340

c.如何JSONView的获取整个DataModel而不是字段？我每次用alert(mainView.jsonData); 结果是“undefined”
如果是获取DataModel，那应该用View对象。出现undefined的原因是load()是异步的，你必须先等待数据load完。如：

mainView.el.getUpdateManager().on('update', function(){
     alert(mainView.jsonData);
});
详见http://www.yui-ext.com/forum/viewtopic.php?t=1209

d.学习例子。范例Image Chooser本身就是一个好的学习例子

JSON Format
您可能认为服务输出这样的JSON：

{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}
是正确无误的。但不对，它是不能被处理的。正确的格式应该是：

{"user": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]}
注意方括号内声明的是数组类型，View渲染方式实际是与DataModel一致的

演示地址

【View之定义】
  A View is generally used to build a quick template-based display of datamodel, rather than building a more complex grid. I thnk there's a blog post that illustrates doing this with JSON data. Templates can be used for any repetitious html creation, not necessarily tied to a datamodel.
主要的意思是View用于展示DataModel的数据，Part 1已经说过。这里是来自fourm某君的补充。

代码点评：

1.先看一段简单的

2.在LayoutDialog中加入Tabs

LayoutDialong分两个区域：west & center。而center之中我们要加入tabs，并逐一附加active的事件

这两个问题放在一起讨论的原因是至今我还不能实现。如果按照jack的办法：

Author:Dave Fenwick
Published: May 01, 2007
Translater: Frank Cheung

Ext的layout布局对于建立WEB程序尤为有用。关于布局引擎（layout engine），区域管理器（region manager）的教程将分为几部分，本文是第一篇，为您介绍如何创建区域，如何增加版面到这些区域。

布局引擎(layout engine)这一功能早已在EXT前个ALPHA实现了。 Jack Slocum对于怎样环绕某一区域，给与指定区域管理的策略，和建立界面的问题，在他的第一、第二篇关于跨浏览器的WEB2.0布局功能的博客中，进行过讨论。定义一个DOM元素的边界（edge），使之一个布局的边框（border）－－这种做法使得创建“加厚型(thick－like)”客户端UI的开发更进一大步。

布局管理器(layout manager)负责管理这些区域。布局管理的主要的用户组件是BorderLayout类。该类为EXT开发富界面的程序提供了一个切入点。Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板，你可通过NestedLayoutPanel 类套嵌到BorderLayout 实例中。

注意事项：本教程的每个文件都是.html和.js格式的。教程每一步都有演示,你也可以下载这些文件在编辑器（zip格式提供在这里）中看看发生什么事。

面板（Pane）是区域管理（region management）的另外一个组件。面板提供了这么一个地方，可为您的EXT器件（widget）、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板，只不过用于链接多个BorderLayout的区域，其它的面板包括内容面板 ContentPanel,GRID面板 GridPanel,和树状面板 TreePanel。

简单的例子
下面的layout包含 north, south, east, west,和center的区域，而且每个区域包含一个ContentPanel，各区域之间使用得了分隔条分割开。

InternetExploer注意事项：BorderLayout所容纳的元素必须有一个SIZE以便正确渲染。典型地你无须为document.body 指明size，因为document.body通常是有size的了（大多数情况，－如果你在浏览器上什么也看不到）。但是如果你将layout连同容器放到现有的web页面上（‘可能是DIV）,那么DIV的size应该先指明以便正确渲染。如下列显示正常：

好，让我们趁热打铁，看看完整的layout是怎样的。假设ext是一子目录叫做ext-1.0，父目录下面的代码。

simple.html:

simple.js:

simple2.html

除此之外，还可以利用ContentPanel对象带有的function加载数据。可用的方法有几种，这里我们使用其中两种：setContent() 与 setUrl()。setContent()允许您直接从JavaScipt程序中插入HTML。setUrl()，允许您从服务端得到数据加入ContentPanel中。

我们原来的例子中，ContentPanel对象创建的时候是匿名的（anonymous）。这没问题，但要引用它们，你需要遍历区域管理器所分配的对象以获得引用的对象。这不是最好的办法，所有我的做法是分配一个变量给ContentPanel然后便可直接引用。

simple3.js

用IFRAME标签做布局可灵活地处理，我们准备在DOM中直接操纵IFRAME.这里IFRAME成为面板的容器，以填入中间区域的内容

设置一下 IFRAME的滚动条并放到中间的页面。.

simple4.html

simple4.js

当前的进展不错。大多数情况滚动条工作起来是很好的，但留意一样的东西， Internet Explorer 7之前的版本，如果文档完整指明DTD的DOCTYPE标签，IE很可能出现垂直滚动条的同时也显示水平滚动条。这个IE布局的一个BUG。

现在这是个基本的LAYOUT和几个ContentPanel对象。接着我们加入一条工具栏（toolbar）到中间的ContentPanel对象。创建过程非常简单。由于主题的关系，我并不准备在这里详细介绍如何创建toolbat。这是简单的创建toolbar的过程：

var simpleToolbar = new Ext.Toolbar('simple-tb');
simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom'});
simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-bottom'});要加入toolbar,需要先加入HTML的容器，我们需要加入一些代码以创建toolbar，然后绑定到中间的区域。toolbar有两个按钮： Scroll Bottom和Scroll Top。这些按钮会滚动IFRAME内容到底部或是顶部。为了尽可能兼容多浏览器，我们的加入一个function来控制IFRAME文档。

simple5.html

simple5.js

所有的区域都可以收缩和展开。要使一个区域可收缩，你应在区域配置项中指定collapsible属性。属性collapsedTitle是用于区域收缩之后显示的文字，collapsedTitle属性只用于north和south区域。

注意我们收藏起west区域时，是没有title的。当前的HTML没有提供对一个元素的90度的旋转。我们只好用一张透明的图片来实现，上面的文字是'Navigation',宽18p,高150p,然后90度旋转。

为了显示图片，我们需要增大EXT原先的widget样式，只须在HTML头样式表中加入下列样式便可得到适合的样式效果。如simple7.html示。

我建议下载用于这个例子的一段程序，这样可能对你有一些帮助。你也可以找一个有效的例子。

表单体
首先要做的第一件事就是创建一个表单体，这相当于在HTML中书写一个
标识。

var form_employee = new Ext.form.Form({
 labelAlign: 'right',
 labelWidth: 175,
 buttonAlign: 'right'
});
 创建表单字段
表单示例由name、title、hire_date和active四个表单字段构成。开头的两个表单字段name和title，只是简单的文本字段，我们会用TextField方法来创建它们。

重要的配置选项是name，定义该选项与HTML中定义一个表单字段名几乎一样。

var employee_name = new Ext.form.TextField({
 fieldLabel: 'Name',
 name: 'name',
 width:190
});

var employee_title = new Ext.form.TextField({
 fieldLabel: 'Title',
 name: 'title',
 width:190
});
 跟着的hire_date字段是一个日期字段，我们会用DateField方法来创建，它会为我们弹出一个别致的日期选择器来让我们选择日期。

format配置选项被用来为PHP指定日期格式标准（PHP的日期格式）。日期格式字符串的调整须与你所用的日期格式相匹配。

var employee_hire_date = new Ext.form.DateField({
 fieldLabel: 'Hire Date',
 name: 'hire_date',
 width:90,
 allowBlank:false,
 format:'m-d-Y'
});
 最后一个表单元素active是一个布尔值，我们使用Checkbox方法来创建。

var employee_active = new Ext.form.Checkbox({
 fieldLabel: 'Active',
 name: 'active'
});
 完成表单
现在，我们把表单里的所有表单字段加入到fieldset中去。当然了，如果你想在fieldset的外面进行，可以选择使用add方法。

form_employee.fieldset(
 {legend:'Employee Edit'},
 employee_name,
 employee_title,
 employee_hire_date,
 employee_active
)
 最后，最不能少的就是submit按钮，它与一小段的错误检测代码块一起被addButton方法加进来。当该按钮被点击，就会调用render方法，传入div标识的“id”，然后在网页的div里把表单显示出来。

form_employee.addButton('Save', function(){
 if (form_employee.isValid()) {
  Ext.MessageBox.alert('Success', 'You have filled out the form correctly.'); 
 }else{
  Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
 }
}, form_employee);

form_employee.render('employee-form');
 下一步

虽然本教程让你懂得了如何去创建一个表单，但创建出来的表单什么事情也干不了。就像一部没有引擎的小汽车——它看起来可能很漂亮，但不能让你走得更远。

这个教程使用了在getting started tutorial教程中使用过的 雇员信息编辑表单。如果你仍然不熟悉如何创建一个表单，你可以首先看一下这个例子。我建议下载用于这个例子的一段程序，这样可能对你有一些帮助。你也可以找一个有效的例子。

我们将经历使用表单的整个过程，从最初的从服务器获取数据填入表单，到将数据返回给服务器。在后端我使用PHP和MySQL, 然而这个例子对于PHP和MySQL来说并不是特殊的，而是只要求你能够从你的服务器读取和输出JSON数据。

让我们开始吧
首先我们必须设置表单的url, 这是一个能获得POST数据并将其写进我们的数据库的PHP脚本.

var form_employee = new Ext.form.Form({
 ...
 url:'forms-submit-process.php',
 ...
});
 我们的数据包含5个字段：id, name, title, hire_date和active,这些字段可以被取回并放置到一个数据存储对象（Store）中。

以下的程序构造了一个数据存储对象，在这个时候没有数据被取回，我们的数据代理（Proxy）对象提交到一个PHP脚本，用来取回数据库id为14的行 并将它转换成一个JSON字符串。

employee_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
reader: new Ext.data.JsonReader({},[ 'id', 'name', 'title', 'hire_date', 'active']),
remoteSort: false
});

接下来要做的是设定我们的事件监听者来监察什么时候数据被载入， 这个将保证我们不会在数据被载入之前填入表单。

employee_data.on('load', function() {
 
 // data loaded, do something with it here...
   
});
 当数据被载入后，我们可以取回数据并用setValue方法将其填入表单。这里我们用getAt(0) 从我们的数据存储对象里重新取回第一行数据（行zero）。

注意：这里使用的表单和表单字段在getting started tutorial中有定义和解释。

employee_name.setValue(employee_data.getAt(0).data.name);
employee_title.setValue(employee_data.getAt(0).data.title);
employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);
employee_active.setValue(Ext.util.Format.boolean(employee_data.getAt(0).data.active));
 我们将要创建提交按钮并添加到表单，记得给来源于表单字段的POST数据设定扩展参数。你将会发现通过行确定字段（id）对于让php脚本找到需要更新的行非常有用，同时为了更好的判断，还需要一个action判定。

我还使用isValid参数来保证表单在提交前符合每一个字段的要求。

form_employee.addButton('Save', function(){
 if (form_employee.isValid()) {
  form_employee.submit({
   params:{
    action:'submit',
    id:employee_data.getAt(0).data.id
   },
   waitMsg:'Saving...'
  }); 
 }else{
  Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
 }
}, form_employee);

form_employee.render('employee-form');
 读取我们的数据
现在我们来读取数据

employee_data.load();
 这样真的能够惊人简单的创建一个可用的表单，与成对的服务器段脚本接合，就能够将数据从数据库获取并写入修改后的数据。这些服务端脚本可以简单到只需几行而已。

接下来是什么？

通常来说，API文件和例子对于学习怎么样将表单改造成你所需要的形式来说是很不错的途径。

现在我们加载html模板，创建一个模板对象（第五行），然后进行编译（第六行）。尽管编译模板不是必须的，但是一般情况下总能改善性能的。

 var html = '<a id="{id}" href="{url}" class="nav">{text}</a><br />';
 var tpl =
       
    new Ext.Template(html);
 tpl.compile();
第二步，将数据加入到模板中
这里我们将使用append方法加入两行的数据。正如你所见，元素的“id”、“url”和“text”相对应于上述模板的容器。

 tpl.append('blog-roll', {
     id: 'link1',
     url: 'http://www.jackslocum.com/',
     text: "Jack's Site"
 });
 tpl.append('blog-roll', {
     id: 'link2',
     url: 'http://www.extjs.com/',
     text: "Jack's New Site"
 });

这就是模板的基本知识点，对于你来这说非常简单吧？

下一步
如果你想换换口味，文档区便是一个绝佳的好地方。看看范例Feed Viewer，里面就大量使用了模板。

本教程基于Ext的模板引擎展开详述，亦是对 Shea Frederick“模板入门”教程一文的补充。假设读者已经初步接触过模板（Templates）,和格式化函数的基本语法为“{VARIABLE:[(可选的参数)]}”。

正式开始
假设我们打算从一变量中， 打印出内容，但当中的内容有可能会占用过多的空间。对于这种情况，通过的办法是对该内容截取，限制在50个英文字符内，然后做成连接让用户点击后观察全文。函数"ellipsis" 的功能正是这样，可限制在任意字符数内。另外，在截取字符串的后面，该函数还会加上“...“，以示实际的内容还有更多。

一个模板如下示：

var myTpl = new Ext.Template('<div>{content:ellipsis(50)}<br/><a href="{moreLink}">Read More</a></div>');
 通过处理，其中有47个字符是属于内容本身的，另外三个字符是”...“,一共50个字符。

这是一份格式化函数的列表，可用于模板：
ellipsis(length) - 对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。适用于只显示前N位的字符，然后提供详细页面的场合。
undef -检查一个值是否为underfined，如果是的转换为空值
htmlEncode - 转换(&, <, >, and ') 字符
trim - 对一段文本的前后多余的空格裁剪
substr(start, length) - 返回一个从指定位置开始的指定长度的子字符串。
lowercase - 返回一个字符串，该字符串中的字母被转换为小写字母。
uppercase - 返回一个字符串，该字符串中的字母被转换为大写字母。
capitalize - 返回一个字符串，该字符串中的第一个字母转化为大写字母，剩余的为小写。
usMoney - 格式化数字到美元货币。如：$10.97
date[(format)] - 将一个日期解析成为一个特定格式模式的日期。如日期字符串不输入，默认为“月/日/年”
stripTags - 剥去变量的所有HTML标签

您亦可以创建自定义的格式化函数，具体做法是，在模板的实例上加入新的方法，继而在模板上调用，格式化的函数应该像这样的："{VARIABLE:this.}"

这是一个简单是实例，对模板实例加入一个"yesNoFormat "的新函数。yesNoFormat 与ColdFusion转换”truthy“函数相类似 ，如果是真的输出"Yes",假的输出”No“。

var testCustomTpl = new Ext.Template('<div>User: {username} IsRevoked: {revoked:this.yesNoFormat}</div>');
testCustomTpl.yesNoFormat = function(value) {
 return value ? 'Yes' : 'No';
};  
testCustomTpl.append(document.body, {username: 'aconran', revoked: 1});   
  下一步
关于怎么学好EXT这个框架我的看法是，在您熟悉的IDE中打开源码进行阅读。保证阁下一定会收获不少技巧和写代码的好习惯，而且极有可能发现新的大陆，还是没有归档的。熟悉模板Templates的简单用法和格式化功能后，就可进入下一步的学习：MasterTemplates。MasterTemplates提供了处理”子模板“的功能，以方便从数据库循环数据，同时亦包含模板（Templates）的所有功能。