Extjs教程第二章Ext概览Word文件下载.docx

Extjs教程第二章Ext概览Word文件下载.docx

《Extjs教程第二章Ext概览Word文件下载.docx》由会员分享，可在线阅读，更多相关《Extjs教程第二章Ext概览Word文件下载.docx（11页珍藏版）》请在冰豆网上搜索。

images/s.gif'

;

}）;

您可能会问为什么需要这张图片。

Ext的用户界面是依靠CSS的，但是CSS是通过为很多HTML元素提供样式来拼凑出Ext的组件的。

唯一能够跨浏览器且保持精准大小的只有图片。

所以图片被用来定义Ext组件的如何展现。

这是Ext提供浏览器兼容性的一种主要方式。

控件（widget）：

Ext包含很多控件（widgets）。

他们包含了很多的组件（components），如：

消息框、表格、窗口以及其他承的担特定的与用户界面相关的功能。

我喜欢把类似于onReady的组件定义为核心函数或者方法，把能够提供某种用户界面智能的组件叫做控件“widget”——如同用来展示数据给用户的表格。

（PS：

由于翻译水平有限，其实我也找不到合适的词来形容widget和component了，所以，后面我们凡是说控件，就是指“widget”，组件则指“component”。

）

动作时间：

我们来新建一个页面（或者直接修改“gettingstarted”示例）并添加代码以显示一个对话框：

Ext.Msg.show（{

title:

'

Milton'

msg:

Haveyouseenmystapler?

'

buttons:

{

yes:

true,

no:

cancel:

true

}

}）;

在之前的章节里，我们已经把Ext代码放在了onReady的function中了。

接下来就可以通过配置对象（configobject）来配置对话框了。

这个个配置对象一共包含3个元素，最后一个是个嵌套的对象用来展示3个按钮。

以下是显示效果：

这看起来是一个最简单的对话框，但是当我们点击东西的时候，Ext内置的功能变显现出来。

这个对话框可以被来回拖动，如同传统的桌面程序一般。

同时，你还可以看到一个关闭按钮，在对话框处于激活状态下可以通过按“Esc”键来关闭对话框，或者按Cancel按钮来关闭对话框。

到底发生了什么？

让我们仔细看一下使用的两个Ext的核心函数：

这个函数用来保证让Ext在等待DOM加载完后执行所有的事情。

这个是必须的，因为JavaScript实在访问页面的同时执行的，在这个时间点上，DOM可能还没有生成完全。

Ext.Msg.show：

这是用来建立对话框的主要函数，它管理了对话框得以运行的s所有必需的资源。

有很多对话框类型的缩略短语，可以帮助您节省时间。

我们用几分钟时间来介绍他们。

使用onReady：

现在检验我们刚才的代码：

onReady函数是用来保证代码等待页面加载完全的。

给onReady传递的是一个函数，可以只传一个函数名，或者直接写在内部，就像我们的示例一样。

这种写在onReady内部的方式叫做匿名函数，用来一次性调用特定的函数。

如果我们想多次执行一个函数，我们需要如下定义：

Functionstapler（）{

}）;

}

Ext.onReady（stapler（））;

为了不使程序过于庞大，我们最好不要使用匿名函数，我们可以采用可重用的函数。

N：

你可以定义想要显示在按钮上的文字。

这样会传递你想要的文字而不是布尔值，你可以这样使用：

{yes:

‘Maybe’}。

更多的惊喜：

让我们回到正题，现在来美化下我们的程序，添加一些图标和按钮。

这一切可以通过添加图标样式来完成。

你可以在配置对象里添加icon和buttons的条目来完成这一切。

首先我们先讨论下所需要的CSS。

添加以下样式到你的页面中：

.milton-icon{

background:

url（milton-head-icon.png）no-repeat;

然后，我们需要改变控件的配置。

icon属性的属性值是样式的名称：

milton-icon（就是选择器的名称），我们可以添加一个函数用来处理用户点击按钮的事件。

这些函数是匿名函数，在这个示例中，它只是用来传递变量：

Ext.Msg.show（{

title:

msg:

buttons:

yes:

no:

cancel:

},

icon:

milton-icon'

fn:

function（btn）{

Ext.Msg.alert（'

YouClicked'

btn）;

}

在我们的例子里，函数只有一个参数，就是点击的按钮的名字。

所以当我们单击Yes按钮，btn变量的值就应该是yes。

在示例里我们获得按钮的名字并把它作为警告信息来显示。

N：

Cancel按钮的功能是隐藏在内部的，右上角close图标和Esc键都能产生取消的动作。

这是Ext提供的一种使得编码简单的方式。

JSON和配置对象：

我们在示例里使用了配置对象，这是一种告诉Ext你想怎么做的方法。

它提供了很多用来配置相应功能的选项。

传统方式：

以前我们需要在调用函数时传递事先给定的参数，这需要我们记住参数的顺序以便使用该函数。

vartest=newTestFuntion（

three'

fixed'

arguments'

）;

这种传统的函数使用方法会导致很多问题：

∙它要求我们记住参数的顺序；

∙它没有描述参数的含义；

∙参数的可选性很差。

新的方式——配置对象：

利用配置对象，我们可以通过解释文本了解各个变量的意义以及跟更高的灵活性。

参数的顺序不再重要，可以随机排列。

由于该特性，参数不再让我们束手束脚了。

vartest=newTestFunction（{

firstWord:

secondWord:

thirdWord:

这种方式可以让我们无限制地扩展函数的参数，是加是减完全随意，而且十分简单。

还有一个好处就是之前使的函数不会受后来对其添加或者减少参数的影响。

fourthWord:

wow'

什么是配置对象（configobject）？

如果你对CSS和JSON熟悉的话，你可以发现配置对象和它们有相似之处，因为他们几乎完全一样。

配置对象的作用就是让程序语言更好地读懂数据的结构——这里所谓的程序语言就是Javascript。

举个例子来看看配置在我们代码中的体现：

{

智力的配置可能显得过于复杂，但是一旦我们了解了它，一切就将变的十分简单和迅速。

所有的Ext控件都需要配置对象，所以我们必须对它十分熟悉。

配置对象是我们相当有用的朋友。

这里提几点在使用配置对象时的注意事项：

∙配置条目（record）要被花括号包围，每一个括号中的条目都是对象的一部分——{records}；

∙每个条目都有属性名和属性值，其间被冒号分割，条目之间靠逗号分割——{name0:

value0,name1:

value1}；

∙条目的属性值可以是任何数据类型，包括布尔型，数组，函数以及对象——{name0:

true,name1:

{name2:

value2}}；

∙方括号代表数组——{name:

[‘one’,‘two’,‘three’]}。

数组中的元素也可以是包含对象、值与数字的任何东西。

使用JSON格式的最大好处就是你可以通过添加配置来修改控件。

不像原始的函数，配置选项现在变得毫不相干，可以任意增减。

JSON是如何工作的？

你可能听别人提起过eval，它就大体上来自于JSON。

eval函数就是JavaScript用来解释JSON字符串的，把字符串转化为对象、数组、函数或者其它。

该行动了：

好了，我们了解了Ext的工作机制并对使用者进行了提问。

现在我们可以采用问题的回答了。

让我们在对话框中添加函数以用来表明在点击按钮后执行什么相应。

switch可以帮我们完成这些：

switch（btn）{

case'

yes'

:

Ext.Msg.prompt（'

'

Whereisit?

break;

no'

Ext.Msg.alert（'

'

Imgoingtoburnthebuildingdown!

cancel'

Ext.Msg.wait（'

Savingtablestodisk...'

'

FileCopy'

还记得前面提及的对话种类吗？

我们现在介绍一些，它们帮助我们完成特定的任务，不需要我们为区分任务的不同而专门进行配置。

点击OK你可以得到一个提示（prompt）对话框。

提示对话框的作用是让你输入单一的值，在几乎所有的用户界面中它是一个标准的元素。

点击No你会得到一个警告（alert）。

你一定熟悉JS中的传统的警告框。

我还清楚地记得第一次使用JS的警告框的时候，我十分激动，警告的信息是：

“如果你是傻子，请点击OK”。

点击Cancel按钮（或者点击close按钮或者按下Esc键）你可以得到进度对话框。

Ext可以控制进度对话框并通知它何时消失。

但是为了简单，在本例中，我们让它一直运行。

Ext中内置了按钮的聚焦和Tab键带来的顺序移动。

一般来说OK或者Yes是默认的动作。

按回车键可以触发这个按钮，按Tab键可以让焦点在对话框中的按钮和其他元素上移动。

点火：

现在我们可以在页面中添加一些基于用户对于对话框操作的动作响应。

我们将通过修改switch结构来管理Yes按钮的单击。

提示窗口（prompt）可以接收第三个参数，就是点击Yes按钮后执行的函数。

我们第一这个函数来检验用户输入的值是否等于“theoffice”，如果不等于，把该值写在页面的DIV标签中，如果值等于“theoffice”的话，我们在DIV标签中默认添加“DullWork”文本。

在同一个DIV上，我们采用一个“Swingline”订书机作为背景图片。

case'

Ext.Msg.prompt（'

function（btn,txt）

if（txt.toLowerCase（）=='

theoffice'

）{

Ext.get（'

my_id'

）.dom.innerHTML='

DullWork'

}else{

）.dom.innerHTML=txt;

Ext.DomHelper.applyStyles（'

{

background:

transparent

url（images/stapler.png）50%50%no-repeat'

break;

对于no的情况，将会出现一个警告对话框，在点击No按钮的同时，页面也将会改变：

case'

Ext.Msg.alert（'

function（）{

Ext.DomHelper.applyStyles（'

'

background'

transparenturl（images/fire.png）0100%repeat-x'

Ext.DomHelper.applyStyles（Ext.getBody（）,{

'

background-color'

#FF0000'

Ext.getBody（）.highlight（'

FFCC00'

endColor:

FF0000'

duration:

6

肩负重担的Ext.get：

Ext之所以工作的这么出色，是因为他有一套访问DOM的机制，很多函数和方法都是用来操控DOM的，这些方法中，有一个最为常用：

Ext.get（‘my_id’）；

它让我们可以通过页面中的元素ID来访问某个元素。

如果我们回首看一下第一个例子，里头采用了getBody，我们就是靠其来获得body元素并为之添加效果的。

现在对于my_id来说，我们需要真正添加一个my_id元素：

<

divid='

style='

width:

200px;

height:

>

test<

/div>

当我们把上面的div加入页面中，并把之前的对body的引用转化为对my_id的引用，显示的效果就只发生在id为my_id的div上。

Ext.get（'

）.highlight（'

endColor:

0000FF'

duration:

3

现在让我们看下浏览器，你将会发现只有200像素的区域改变了颜色，而不是整个页面。

切记ID一定要唯一，一旦采用了my_id就不能再在同一页面中使用相同的id了。

当ID重复时，用Ext.get只能访问最后一个。

这只能被当做一个bug而不能当做一种设计。

对于大部分代码，Ext建立并跟踪自己的ID，在大多数情况下，我们只需要默认使用Ext对页面元素的自动跟踪，而不需要亲自来创建元素或者定位它们。

重复的ID会导致奇怪的现象，如控件只显示在浏览器左上角，所以应该尽量避免重复ID。

效率上的建议：

这个不能完全算一个效率上的建议，但是采用“flyweight”完成任务可以节省内存，这样可以通过避免占用浏览器的内存来提高效率。

上面那个高亮效果的例子可以采用flyweight来重写：

Ext.fly（'

flyweight被用在我们想用一行代码对某一元素执行一次操作时，而且我们不需要再次使用之前靠flyweight引用的元素。

在每次被调用时，flyweight将会只重复使用同一内存。

下面这个使用flyweight的例子是不正确的：

varmy_id=Ext.fly（'

another_id'

my_id.highlight（'

{endColor:

3}）;

因为flyweight在被调用时使用的是同一内存，所以当我们使用my_id来改变高亮显示的时候，引用已经指向了another_id元素。

总结：

只用了几行代码，我们就创建了一个能让您兴奋半天的有趣的程序。

好吧，可能达不到半天，但是至少会有几分钟吧。

但是，我们已经实现了传统桌面程序的基本功能和用户界面。

我们学习使用了基本的配置对象（configobject），我确定我们会在使用更多控件后了解更多只是。

配置对象是我们使用Ext的基础，你对它接受的越快，接下来的学习就会越简单。

如果你对配置对象不能完全适应的话，请不要担心，我们还会通过大量的事件来对它进行说明，现在，我们把话题转移到我最喜欢的东西之一——表单（forms）。

.