Extjs入门教程哦.docx

我们需要添加一下三个文件： ext-all.css：这是一个样式表文件，用来控制组件的显示。改文件不需要进行修改，任何改动将影响日后的升级。如果真的想改动样式的话，可以在引入该样式文件后再做覆盖。 ext-base.js：这个文件提供了Ext的核心功能。如果Ext是一部车，它就是车的引擎。这个文件我们可以修改以用来采用其他的库，如jQuery，让它和Ext共存。 ext-all-bug.js/ext-all.js：所有的组件都蕴含在这个文件里面。前者用来调试开发，后者在发布的时候采用。当这些文件都准备好后，我们就可以真正开始享受Ext带给我们的快乐。N：如果你在同时使用后台语言（如PHP、ASP.NET等），你可以选择动态的加载这些行。对于本书中的大部分示例来讲，我们假定其运行在静态HTML页面中。使用Ext库：现在我们在页面中加入了Ext库，我们可以在页面中添加Ext代码了。在第一个例子中，我们使用Ext来显示消息对话框。可能满足不了您的胃口，但是这只是个开始。动作的时间：我们可以通过在文件的头部添加script段来加入Ext代码，当然得添加到Ext文件引入之后。我们的例子会弹出一个Ext风格的警告对话框：Getting Started ExampleExt.onReady(function()Ext.Msg.alert(Hello, World););我们现在先不详细解释脚本。首先，我们要确定Ext库被成功的引用。当我们打开页面，我们应该能看到这样的警告消息：如同一个真的对话框一样，你可以任意拖拽它，但只局限有浏览器中，因为它并不是一个真正的对话框，只是如同罢了。它是有很多堆砌而成，你可以看到Close和Ok按钮在鼠标移近时高亮显示一切只不过是一句话的事情。Ext为您搞定了一切，我们来看看如何能做的更多。N：你可能已经发现我们的文档的body中没有任何元素。Ext实现其功能不需要事先存在的标记，它只是按照需要来产生一切内容。这个示例：我们来研究下代码。Ext组件需要以“Ext”开头并且经常要包含onReady函数，这个我们将在下章做详细介绍。Ext.onReady(function()Ext.Msg.alert(Hello, World););Ext包含很多易懂的接口，大部分只是一句话，当准备好Ext后，它可以展示一个警告窗口，让Hello作为标题，让World作为主体。我们的消息窗口源自于Ext.Msg，它是所有消息窗体的前缀，是“MessageBox”的简称。alert部分告诉我们消息窗口的类型。不工作了？当库未准备好时，我们会接收到一个Ext is undefined的错误。这个消息代表Ext并没有被加载。可能是一个或者多个文件的引用路径不对，复核一下路径让他们指定到已存在的文件。如果一切都正常的话，你应该可以看到adapter文件夹和ext-all.js以及ext-all-bug在lib/extjs文件夹下。另外一个常见的问题是，CSS文件的丢失或者不正常的引用。这样的话，显示会不正常，如下：如果发生这样的状况，请检查你是否从SDK中获得了CSS文件，以及路径是否正确。resources文件夹需要在lib/extjs文件夹下。适配器（Adapters）：Ext开发之初，需要YUI库来做“幕后”的工作。随后，Ext采用了2个新的框架jQuery和scriptaculous（Protaculous）。这意味着当你已经采用了其他的库或者其他的库可以刚好地满足你的需求是，我们可以使用适配器来连接这一切。Ext还可以保证它的功能，组件还如之前一样，不论你选择何种适配器。Ext也有它自己的适配器，如果你对其他的库或者框架没有偏爱的话，就用Ext的内建适配器吧。使用适配器：为了使用适配器，你需要先引入扩展的库，再加入Ext SDK中相关的适配器文件。我们的示例用的是Ext适配器。如果使用其他库，只要把Ext默认的适配器引入脚本行置换为新的库，如下所示：对于jQuery，引入如下文件：对于YUI，把如下文件加入head：对于“Prototype + Scriptaculous”：在引入适配器和基本库之后，我们只需在引入ext-all.js或者ext-all.debug.js文件。我是异步的！web1.0代码的运行点是建立在完成的基础上的一直等到每一行代码都执行完全后再进行下一个任务。如同建造一个房子一样，必须在砌墙前打地基，之后才能盖房顶。在Ext中我们可以先盖房顶后打地基。想象一下，房顶正在工厂中制造，而地基此时正在夯实，接下来是筑墙。当一切就绪后，房顶会立刻安置在墙的上方。这里的介绍我们事先可能没有接触过，也没必要弄得很清楚，像房顶在墙筑好前建造完。我们不需要再一行一行地进行web开发了。Ext给我们提供了事件和句柄来实现功能。我们可以设计事件来监视墙何时能建好，这样我们就可以第一时间安上房顶。这种思想可能让很多web开发者难以接收，但是您一定会很快掌握的。N：传统的JS警告框会阻止代码的执行，将带来不可预期的结果。你不可以采用传统的警告框，这样可以让显示MessageBox的同时不产生暂停。地方化：Ext可以在按照您的语言来查看，现在有40种翻译（遗憾的是，克林贡文不在其内）。所有的翻译来自用户的贡献我们需要在自己的母语中使用Ext。所以我们可以选择自己语言的版本，并把它拷贝到lib文件夹下。通过复制语言文件到lib文件夹，我们可以编辑它并添加翻译到其中，但要保证在升级时不要覆盖了它。有三种地方化的方案，对应三种不同的方法： 只有英语 非英语的单一语种 多语言只有英语：这种方案不需要做任何改动，也不需要添加任何文件，因为英语的翻译已经存在于ext-all.js文件当中了。一种非英语语言：第二种方案需要从build/locale文件夹中引入一个语言文件。是通过重写英语文本来实现此方案的，所以，它需要在其他所有的库文件引入后才能引入，如下所示：在此例中我已经加入了西班牙语的翻译，我们来看看效果：部分UI界面被本地化了大概包括日历文本、错误信息、tooltip信息，分页信息以及加载指示。在你的程序中指定的信息，如Hi标题以及Hello World Example文本则可以对其进行翻译并加到ext-lang-XX.js文件中（“XX”是你语言的缩写）或者添加到一个你自定义的语言文件中。推荐的方式是建立一个你自己的语言文件来用来记录改动和增加的内容。这样可以使方便我们准备升级以及修复主要的语言文件。多语言：第三种方案是对第二种方案的一点点改动。我们只需要添加一些服务端脚本来使得页面可以在语言之间切换。遗憾的是，语言间的切换并不是完全动态的，换句话说，我们不可能第一时间感受到改动在屏幕上的显示效果。Ext在线社区：Ext在线社区云集了一大批高手，Ext开发者也会经常性在论坛上回复大家的问题：/forum/如果你遇到了困难，可以在论坛上搜索你需要的回答。我建议你使用在Learn板块中Google论坛搜索工具，该板块位于：/learn/H：在论坛提问之前，您最好附上详细的错误信息，以及错误代码和消息。这是 您获得良好反馈的关键所在。总结：在这章里，我们们介绍了如何正常运行Ext的基础知识以及简单的脚本。我们经常会因为落下