extjsExt概览.docVIP

第二章 Ext概览（1） 在这章里，我们将要开始使用Ext控件，我们将建立一系列的对话框来实现用户和浏览器的交互。我们将使用onReady、MessageBox、以及get方法来了解如何建立不同种类的对话框并且学习如何在页面中修改HTML和样式。除此之外，在这章里，我们还会： 找到如何简单配置Ext控件的方法； 用DOM做基础实现用户交互； 用对话框指出用户想要做的事情； 动态地响应用户的输入，并改变HTML和CSS。 我们将要从对Ext中几个主要函数的介绍来开始学习。先回想一下第一章中介绍的示例，我们将会对它进行拓展。这些核心函数我们将会在本书的哥哥部分使用： Ext.onReady：这个函数用来判断页面已经准备好来执行Ext的内容，即用来判断页面是否加载完全； Ext.Msg：用来产生一个有固定样式的消息窗口； configuration objects(配置对象)：这个函数定义控件将如何展示和工作； 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”。） 动作时间： 我们来新建一个页面（或者直接修改“getting started”示例）并添加代码以显示一个对话框： Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = images/s.gif; Ext.Msg.show({ title: Milton, msg: Have you seen my stapler?, buttons: { yes: true, no: true, cancel: true } }); }); 在之前的章节里，我们已经把Ext代码放在了onReady的function中了。接下来就可以通过配置对象（config object）来配置对话框了。这个个配置对象一共包含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: Have you seen my stapler?, buttons: { yes: true, no: true, can