龙龙 — Tue, 25 Mar 2008 09:30:00 GMT

无论你是Ext库的新手�Q�抑或是想了解Ext的�h�Q�本��文章的内容都适合你。本文将��单地介绍Ext的几个基本概念，和如何快速地做出一个动态的��面�q�运行�v来，假设读者已具备了一些JavaScript�l�验和初�U�了解HTML Dom。否则的话，请从阅读初学JavaScript资源开始�?/p>

下蝲Ext

如果你未曾下载过�Q�那应从�q�里下蝲最新版本的Ext http://extjs.com/downloads�?/p>

针对你的下蝲需求，有几个不同的�Ҏ��选项。通常圎ͼ�最�E�_��的版本，是较多�h的选择。下载解包后�Q�那个example文�g夹便是一个探索Ext的好地方�Q?/p>

开始！

我们��用Ext�Q�来完成一些JavaScript��d��?/p>

Zip文�g包括三个文�g�Q?strong>ExtStart.html, ExtStart.js�?strong>ExtStart.css。解包这三个文�g到Ext的安装目录中�Q�例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新徏目录“tutorial”。双�?strong>ExtStart.htm�Q�接着你的��览器打开启动��面�Q�应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误�Q�请按照��面上的指引操作�?/p>

在你常用的IDE中或文本�~�辑器中�Q�打开ExtStart.js看看�Q?/p>

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

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

Element�Q�Ext的核�?/h1>

大多数的JavaScript操作都需要获取页面上的某个元素（reference�Q?好让你来做有��的事情。传�l�的JavaScript�Ҏ��Q�是通过ID获取Dom节点的：

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

�q�毫无问题，不过�q�样单单�q�回一个对象（DOM节点�Q�，用�v来�ƈ不是太强大和好用。�ؓ了要用那节点�q�点事情�Q�你��会要写不少自定义的代码�Q�另外，对于不同�c�d��览器之间的差异�Q�要你处理�v来可真头大了�?/p>

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

由ID获取一个Ext Element如下�Q�首��ExtStart.htm包含一个div�Q�ID名字�?#8220;myDiv”�Q�然后，在ExtStart.js中加入下列语句）�Q?/p>

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

再回头看看Element对象�Q�发��C��么有��的东东呢？

Element包含了常见的DOM�Ҏ��和属性，提供一个快��L��、统一的、跨��览器的接口�Q�若使用Element.dom的话�Q�就可以直接讉K��底层DOM的节炏V��）�Q?
Element.get()�Ҏ��内置�~�存处理�Q�Cache)�Q�多�ơ访问同一对象效率上有极大优势�Q?
内置常用的DOM节点的动作，�q�且是跨��览器的定位的位�|�、大��、动甅R��拖攄��{�（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop�Q��?

�q�意味着你可用最��的代码来做各种各样的事情，�q�里仅仅是一个简单的例子�Q�完整的列表在ElementAPI中）�?/p>

�l�箋在ExtStart.js中，在刚才我们获取好myDiv的位�|�中加入�Q?/p>

myDiv.highlight();      //黄色高亮昄���然后渐退
myDiv.addClass('red');  // ��d��自定义CSS�c?(在ExtStart.css定义)
myDiv.center();         //在视图中���元素居�?
myDiv.setOpacity(.25);  // 使元素半透明

获取多个DOM的节�?/h1>

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

DomQuery可作为单独的库��用，但常用于Ext�Q�你可以在上下文环境中（Context�Q�获取多个元素，然后通过Element接口调用。幸�q�的是，Element对象本��n便有Element.selcect的方法来实现查询�Q�即内部调用DomQuery选取元素。这个简单的例子中，ExtStart.htm包含若干�D�落�Q?lt;p>标签�Q�，没有一个是有ID的，而你惌��村֜�通过一�ơ操作马上获取每一�D�，全体执行它们的动作，可以�q�样做：

// 每段高亮昄���
Ext.select('p').highlight();

DomQuery的选取参数是一�D�较长的数组�Q�其中包括W3C CSS3 Dom选取器、基本XPatch、HTML属性和更多�Q�请参阅DomQuery API文档以了解这功能强大的库的细节�?/p>

响应事�g

到这范例为止�Q�我们所写的代码都是攑֜�onReady中，卛_��面加蝲后��M��立即执行�Q�功能较单一——这��L��话，你便知道�Q�如何响应某个动作或事�g来执行你希望做的事情�Q�做法是�Q�先分配一个function�Q�再定义一个event handler事�g处理器来响应。我们由�q�个��单的范例开始，打开ExtStart.htm�Q�编辑下列的代码�Q?/p>

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

加蝲好页面，代码依然会执行，不过区别是，包含alert()的function是已定义好的�Q�但它不会立卛_��被执行，是分配到按钮的单��M��件中。用��显的文字解释，��是�Q�获取ID�?myDottom'元素的引用，监听��M��发生元素被单�ȝ��情况�Q��ƈ分配一个function,以准备�Q何单��d��素的情况�?/p>

正�\来说�Q�Element.select也能做同��L��事情�Q�即作用在获取一�l�元素上。下一例中�Q�演�C�Z��面中的某一�D�落被单��d��Q�便有弹出窗口：

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

�q�两个例子中�Q�事件处理的function均是��单几句，没有函数的名�U�ͼ��q�种�c�d��函数�U�Cؓ“匿名函数�Q�anonymous function�Q?#8221;�Q�即是没有名的的函数。你也可以分配一个有名字的event handler,�q�对于代码的重用或多个事件很有用。下一例等效于上一例：

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

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

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

注意指定的是DOM节点�Q�所以我们首先将其恢复成为适当的元素，然后执行�Ʋ完成的事�g�Q�这个例子中�Q�我们看见段落是高亮昄��的�?br />

使用Widgets

(Widget原意�?#8220;��器�?#8221;�Q�现指页面中UI控�g)

除了我们已经讨论�q�的核心JavaScript库，现在的Ext亦包括了一�p�d��的最前端的JavaScirptUI�l��g库。文本以一个最常用的widget��Z��子，作简单的介绍�?/p>

MessageBox

比�v略�ؓ沉闷�?#8220;HelloWolrd”消息�H�口�Q�我们做��许变化�Q�前面我们写的代码是�Q�单��L��个段落便会高亮显�C�，现在是单��L��落，在消息窗口中昄��D�落内容出来�?br /> 在上面的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
});

�q�里有些新的概念讨论一下。在�W�一行中我们创徏了一个局部变量（Local Variable�Q�来保存某个元素的引用，卌��单击的那个DOM节点�Q�本例中�Q�我们��L��D�落paragrah,事因我们已经定义该事件与

标签发生兌��的了�Q�。�ؓ什么要�q�样做呢�Q�嗯...观察上面的代码，我们需要引用同一元素来高亮显�C�，在MessageBox中也是引用同一元素作�ؓ参数使用�?br /> 一般来��_��多次重复使用同一��|��Value�Q�或对象�Q�是一个不好的方式�Q�所以，作�ؓ一个好的OOP开发者，应该是将其分配到一个局部变量中�Q�反复��用这变量�Q?/p>

现在�Q�观察MessageBox的调用，准备作�ؓ阐述新概�늚�演示用。乍一看，�q�像一�q�串的参��C��入到�Ҏ��中，但仔�l�看�Q�这是一个非常特别的语法。实际上�Q�传入到MessageBox.show的只有一个参敎ͼ�一个Object literal,包含一�l�属性和属性倹{��在Javascript中，Object Literal是动态的�Q�你可在��M��时候用{和}创徏一个典型的对象(object)。其中的字符�׃��p�d��的name/value�l�成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经帔R��到这�U�模式的语法�Q�因此你应该消耗掉�q�知识！
使用Object Literal的原因是什么呢�Q�主要的原因�?#8220;韧性（flexibility�Q?�Q�随时可新增、删除属性，亦可不管��序地插入。而方法不需要改变。这也是多个参数的情况下�Q��ؓ最�l�开发者带来不��的方便�Q�本例中的MessageBox.show())。例如，我们说这儿的foo.action�Ҏ��Q�有四个参数�Q�而只有一个是你必��M��入的。本例中�Q�你惛_��中的代码可能会是�q�样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写�Q�却是这��P�� foo.action({ param4: 'hello' })�Q�这更易用和易读�?/p>

Gird

Gird是Ext中�h们最惛_��睹�ؓ快的Widgets之一�Q�也是最��行之一。好�Q�让我们看看怎么��L��地创��Z��个Gird�q�运行。用下列代码替换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();
});

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

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

�q�有更多�?.

�q�只是冰�׃��角。还有一打的UI Widgets可以供调用，�?layouts, tabs, menus, toolbars, dialogs, tree view�{�等。请参阅API文��中范例演�C��?

使用Ajax

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


Name:

接着�Q�我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js�?用下面的代码覆盖)�Q?/p>

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();
});
});

�q�种模式看�v来已�l�比较熟悉了吧！先获取按钮元素，加入单击事�g的监听。在事�g处理器中�Q�event handler�Q�，我们使用一个负责处理Ajax��h��、接受响应（Response�Q�和更新另一个元素的Ext内徏�c�，�U�C��UpdateManager。UpdateManager可以直接使用�Q�或者和我们现在的做法一��P��通过Element的load�Ҏ��来访问（本例中该元素�?#8220;msg“的div�Q�。当使用Element.load�Ҏ��Q�请求（request)会被加工处理后发送，�{�待服务器的响应�Q�Response�Q�，来自动替换元素的innerHTML。简单传入服务器url地址�Q�加上字�W�串参数�Q�便可以处理�q�个��h��Q�本例中�Q�参数值来�?#8220;name”元素的value),而text值就是请求发送时提示的文本，完毕后显�C�那个msg的div�Q�因为开始时默认隐藏�Q�。当�Ӟ��和大多数Ext�l��g一��P��UpdateManager有许多的参数可选，不同的Ajax��h��有不同的�Ҏ��。而这里仅演示最��单的那种�?/p>

PHP


echo 'From Server: '.$_GET['name'];

}

?>

ASP.Net

protected void Page_Load(object sender, EventArgs e)

{

if (Request["name"] != null)

{

Response.Write("From Server: " + Request["name"]);

Response.End();

}

}

Cold Fusion



From Server: #url.name#

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

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

本文转蝲�Q�http://extjs.com/tutorial/ext

龙龙 2008-03-25 17:30 发表评论

97在线中文字幕,精品国产污污免费网站入口,黑人久久a级毛片免费观看