EXTJS笔记(1)--入门介绍

ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用.ExtJS主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术.

ExtJS发布包目录:

• adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。
• build：  压缩后的ext全部源码(里面分类存放)。
• docs：  API帮助文档。
• exmaples：提供使用ExtJs技术做出的小实例。
• resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。
• source： 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。
• Ext-all.js：压缩后的Ext全部源码。
• ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。
• ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。
• ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。

   应用extjs时需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-adapter.js等。

    因此，要使用ExtJS框架的页面中一般包括下面几句：

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script>

ExtJS由一系列的类库组成，ExtJS的类库包括以下部分：
   

• 底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件.
• 控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录中.
• 实用工具Utils：Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能.

Ext组件是由 Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

　　组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。所有的组件都继承自Ext.Component.

　　Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变。
  
   Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等，当然在需要的时候其它布局也会常用。


   普通对话框一般包括四个参数，比如confirm的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ，参数title表示对话框的标题，参数msg表示对话框中的提示信息，这两个参数是必须的；可选的参数fn表示当关闭对话框后执行的回调函数，参数 scope表示回调函数的执行作用域。回调函数可以包含两个参数，即button与text,button表示点击的按钮，text表示对话框中有活动输 入选项时输入的文本内容。我们可以在回调函数中通过button参数来判断用户作了什么什么选择，可以通过text来读取在对话框中输入的内容。


   ExtJS2.0一共包含十种布局，常用的布局有border、column、fit、form、card、tabel等布局.


   Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，而且FormPanel还会创建与 <form> 标签相关的组件，因此一般情况下我们直接使用FormPanel即可。


    ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。