Extjs教程第二章Ext概览.docx
《Extjs教程第二章Ext概览.docx》由会员分享，可在线阅读，更多相关《Extjs教程第二章Ext概览.docx（11页珍藏版）》请在冰豆网上搜索。
Extjs教程第二章Ext概览
第二章Ext概览
在这章里，我们将要开始使用Ext控件，我们将建立一系列的对话框来实现用户和浏览器的交互。
我们将使用onReady、MessageBox、以及get方法来了解如何建立不同种类的对话框并且学习如何在页面中修改HTML和样式。
除此之外，在这章里，我们还会：
∙找到如何简单配置Ext控件的方法；
∙用DOM做基础实现用户交互；
∙用对话框指出用户想要做的事情；
∙动态地响应用户的输入，并改变HTML和CSS。
我们将要从对Ext中几个主要函数的介绍来开始学习。
先回想一下第一章中介绍的示例，我们将会对它进行拓展。
这些核心函数我们将会在本书的哥哥部分使用：
Ext.onReady：
这个函数用来判断页面已经准备好来执行Ext的内容，即用来判断页面是否加载完全；
Ext.Msg：
用来产生一个有固定样式的消息窗口；
configurationobjects（配置对象）：
这个函数定义控件将如何展示和工作；
Ext.get：
这个函数用来访问和控制DOM中的而元素。
准备，出发！
在这部分中，我们将要学习onReady事件——在您使用Ext之前首先要了解东西。
我们还讲学习如何显示不同种类的对话框，并且如何相应用户跟对话框的交互。
在这之前，我们需要了解使用Ext的一些基本准则。
空白图片：
在进行下一步之前，我们应该为Ext提供它所需要的——空白图片。
Ext需要一个1×1像素的透明gif图片，采用不同的方式来拉伸从而填补控件的宽度。
我们需要如下定义该图片的路径：
Ext.onReady（function（）{
Ext.BLANK_IMAGE_URL='images/s.gif';
}）;
您可能会问为什么需要这张图片。
Ext的用户界面是依靠CSS的，但是CSS是通过为很多HTML元素提供样式来拼凑出Ext的组件的。
唯一能够跨浏览器且保持精准大小的只有图片。
所以图片被用来定义Ext组件的如何展现。
这是Ext提供浏览器兼容性的一种主要方式。
控件（widget）：
Ext包含很多控件（widgets）。
他们包含了很多的组件（components），如：
消息框、表格、窗口以及其他承的担特定的与用户界面相关的功能。
我喜欢把类似于onReady的组件定义为核心函数或者方法，把能够提供某种用户界面智能的组件叫做控件“widget”——如同用来展示数据给用户的表格。
（PS：
由于翻译水平有限，其实我也找不到合适的词来形容widget和component了，所以，后面我们凡是说控件，就是指“widget”，组件则指“component”。
）
动作时间：
我们来新建一个页面（或者直接修改“gettingstarted”示例）并添加代码以显示一个对话框：
Ext.onReady（function（）{
Ext.BLANK_IMAGE_URL='images/s.gif';
Ext.Msg.show（{
title:
'Milton',
msg:
'Haveyouseenmystapler?
',
buttons:
{
yes:
true,
no:
true,
cancel:
true
}
}）;
}）;
在之前的章节里，我们已经把Ext代码放在了onReady的function中了。
接下来就可以通过配置对象（configobject）来配置对话框了。
这个个配置对象一共包含3个元素，最后一个是个嵌套的对象用来展示3个按钮。
以下是显示效果：
这看起来是一个最简单的对话框，但是当我们点击东西的时候，Ext内置的功能变显现出来。
这个对话框可以被来回拖动，如同传统的桌面程序一般。
同时，你还可以看到一个关闭按钮，在对话框处于激活状态下可以通过按“Esc”键来关闭对话框，或者按Cancel按钮来关闭对话框。
到底发生了什么？
让我们仔细看一下使用的两个Ext的核心函数：
Ext.onReady：
这个函数用来保证让Ext在等待DOM加载完后执行所有的事情。
这个是必须的，因为JavaScript实在访问页面的同时执行的，在这个时间点上，DOM可能还没有生成完全。
Ext.Msg.show：
这是用来建立对话框的主要函数，它管理了对话框得以运行的s所有必需的资源。
有很多对话框类型的缩略短语，可以帮助您节省时间。
我们用几分钟时间来介绍他们。
使用onReady：
现在检验我们刚才的代码：
Ext.onReady（function（）{
Ext.BLANK_IMAGE_URL='images/s.gif';
Ext.Msg.show（{
title:
'Milton',
msg:
'Haveyouseenmystapler?
',
buttons:
{
yes:
true,
no:
true,
cancel:
true
}
}）;
}）;
onReady函数是用来保证代码等待页面加载完全的。
给onReady传递的是一个函数，可以只传一个函数名，或者直接写在内部，就像我们的示例一样。
这种写在onReady内部的方式叫做匿名函数，用来一次性调用特定的函数。
如果我们想多次执行一个函数，我们需要如下定义：
Functionstapler（）{
Ext.Msg.show（{
title:
'Milton',
msg:
'Haveyouseenmystapler?
',
buttons:
{
yes:
true,
no:
true,
cancel:
true
}
}）;
}
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:
'Milton',
msg:
'Haveyouseenmystapler?
',
buttons:
{
yes:
true,
no:
true,
cancel:
true
},
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:
'three',
secondWord:
'fixed',
thirdWord:
'arguments'
}）;
这种方式可以让我们无限制地扩展函数的参数，是加是减完全随意，而且十分简单。
还有一个好处就是之前使的函数不会受后来对其添加或者减少参数的影响。
vartest=newTestFunction（{
secondWord:
'three'
}）;
vartest=newTestFunction（{
secondWord:
'three',
fourthWord:
'wow'
}）;
什么是配置对象（configobject）？
如果你对CSS和JSON熟悉的话，你可以发现配置对象和它们有相似之处，因为他们几乎完全一样。
配置对象的作用就是让程序语言更好地读懂数据的结构——这里所谓的程序语言就是Javascript。
举个例子来看看配置在我们代码中的体现：
{
title:
'Milton',
msg:
'Haveyouseenmystapler?
',
buttons:
{
yes:
true,
no:
true,
cancel:
true
},
icon:
'milton-icon',
fn:
function（btn）{
Ext.Msg.alert（'YouClicked',btn）;
}
}
智力的配置可能显得过于复杂，但是一旦我们了解了它，一切就将变的十分简单和迅速。
所有的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可以帮我们完成这些：
fn:
function（btn）{
switch（btn）{
case'yes':
Ext.Msg.prompt（'Milton','Whereisit?
'）;
break;
case'no':
Ext.Msg.alert（'Milton',
'Imgoingtoburnthebuildingdown!
'）;
break;
case'cancel':
Ext.Msg.wait（'Savingtablestodisk...','FileCopy'）;
break;
}
}
还记得前面提及的对话种类吗？
我们现在介绍一些，它们帮助我们完成特定的任务，不需要我们为区分任务的不同而专门进行配置。
点击OK你可以得到一个提示（prompt）对话框。
提示对话框的作用是让你输入单一的值，在几乎所有的用户界面中它是一个标准的元素。
点击No你会得到一个警告（alert）。
你一定熟悉JS中的传统的警告框。
我还清楚地记得第一次使用JS的警告框的时候，我十分激动，警告的信息是：
“如果你是傻子，请点击OK”。
点击Cancel按钮（或者点击close按钮或者按下Esc键）你可以得到进度对话框。
Ext可以控制进度对话框并通知它何时消失。
但是为了简单，在本例中，我们让它一直运行。
N：
Ext中内置了按钮的聚焦和Tab键带来的顺序移动。
一般来说OK或者Yes是默认的动作。
按回车键可以触发这个按钮，按Tab键可以让焦点在对话框中的按钮和其他元素上移动。
点火：
现在我们可以在页面中添加一些基于用户对于对话框操作的动作响应。
我们将通过修改switch结构来管理Yes按钮的单击。
提示窗口（prompt）可以接收第三个参数，就是点击Yes按钮后执行的函数。
我们第一这个函数来检验用户输入的值是否等于“theoffice”，如果不等于，把该值写在页面的DIV标签中，如果值等于“theoffice”的话，我们在DIV标签中默认添加“DullWork”文本。
在同一个DIV上，我们采用一个“Swingline”订书机作为背景图片。
case'yes':
Ext.Msg.prompt（'Milton','Whereisit?
',function（btn,txt）
{
if（txt.toLowerCase（）=='theoffice'）{
Ext.get（'my_id'）.dom.innerHTML='DullWork';
}else{
Ext.get（'my_id'）.dom.innerHTML=txt;
}
Ext.DomHelper.applyStyles（'my_id',{
background:
'transparent
url（images/stapler.png）50%50%no-repeat'
}）;
}）;
break;
对于no的情况，将会出现一个警告对话框，在点击No按钮的同时，页面也将会改变：
case'no':
Ext.Msg.alert（'Milton','Imgoingtoburnthebuildingdown!
',
function（）{
Ext.DomHelper.applyStyles（'my_id',{
'background':
'transparenturl（images/fire.png）0100%repeat-x'
}）;
Ext.DomHelper.applyStyles（Ext.getBody（）,{
'background-color':
'#FF0000'
}）;
Ext.getBody（）.highlight（'FFCC00',{
endColor:
'FF0000',
duration:
6
}）;
}）;
break;
肩负重担的Ext.get：
Ext之所以工作的这么出色，是因为他有一套访问DOM的机制，很多函数和方法都是用来操控DOM的，这些方法中，有一个最为常用：
Ext.get（‘my_id’）；
它让我们可以通过页面中的元素ID来访问某个元素。
如果我们回首看一下第一个例子，里头采用了getBody，我们就是靠其来获得body元素并为之添加效果的。
现在对于my_id来说，我们需要真正添加一个my_id元素：
200px;height:
200px;'>test
.
升级会员 