Ext2.x学习笔记

Ext2.X学习笔记一

一、ExtJS简介

 1.1 什么是Ext JS？

  · Ext JS是一个Ajax框架，可以用来开发富客户端的Ａｊａｘ应用，是一个用javascript写的，主要用于创建前端用户界面。

  · Ext JS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。　

　·利用Ext JS 构建的RIA Web应用具有与桌面程序一样的标准用户界面与操作方式，并且能够横跨不同的浏览器平台。Ext JS已经成为开发具有完满用户体验的Web应用完美选择。

  · Ext JS最新版本是ext4.0，具有动画功能。   

 1.2 获取Ext JS？

 要使用Ext JS ，首先要得到ExtJ S 库文件，该框架是一个开源的，可以直接从官方网站下载，地址：http://extjs.com。

　  解压缩包之后的目录如下图所示：

           

　　Ext JS开发包介绍

   　　adapter：Ext的底层库和核心代码

   　　docs：Ext提供的API，即帮助文档

   　　examples：官网提供的演示示例

   　　resources：主要存放的是样式文件和图片文件

   　　src：存放源码文件

        ext-all:Ext的核心库，是主文件

二、Ext JS环境配置

　　Ext JS是一个JS库，所以只要将它放在Web应用程序的目录下即可使用。它有两种模式：发布模式和调试模式，即ext-all.js和ext-all-debug.js。前者是经过重新排版和压缩的，文件比较小，方便应用；后者是未经排版的原始格式，在开发过程中方便调试。

     只需将以下文件和文件夹加入程序即可：

    apapter/ext文件夹、resources文件夹和ext-all.js文件

　　<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />

　　<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>

　　<script type="text/javascript" src="ext-3.3.1/ext-all.js"></script>

  2.1 Ext JS开发工具

   　　开发利器Spket——是一款全面支持JavaScript的免费开发工具。它有插件版和IDE两种版本，我们选择插件版可以将它集成到Eclipse，这样我们就可以快速开发Ext JS应用了。

   　　官方网站：www.spket.com。

  2.2安装好插件后还需经过简单的设置

  　　WindowàPreferences选项，在窗口左边可以看到Spket菜单项。选择JavaScript Profiles，点New先创建ExtJS选项，再点Add Library，选择插件文件ext.jsb2，最后选择中所有的选项即可。

三、Ext JS类库

　 Ext JS 由一系列的类库组成，一旦页面成功加载了Ext JS 库后，我们就可以在页面中调用Ext JS 的类及控件来实现需要的功能。

　　 Ext JS 的类库由以下几部分组成：

　　·底层API(core)

　　·控件(widgets)

　　·实用工具(Utils)

3.1 底层API

      底层API 中提供了对Dom操作、查询的封装、事件处理、Dom 查询器等基础的功能。其它控件都是建立在这些底层API的基础上，底层API位于源代码目录的core 子目录中，包括DomHelper.js、Element.js 等文件。

     　　　　　　

3.2  控件

　　控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。

              

3.3 实用工具

     Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS管理等扩展等功能。

                    

四、Ext JS基础组件

　　  

　　Ext .Component是Ext JS中所有组件的基类，它的所有子类都自动享有了标准Ext JS组件的生命周期，包括创建、渲染和销毁。它们也自动支持了标准的隐藏、显示以及启用、禁用等操作。

　　组件大致可分成3大类：

 　　 基本组件——Window、Panel、Button、Grid等

  　　表单组件——Form、Textfield等

  　　工具栏组件——ToolBar、Menu等

　　灵活应用以上各种组件，就可做出具有优雅界面和良好用户体验的Web应用。

4.1 简单实例　

　　第一个应用——Hello World　

　　<link rel=“stylesheet” type=“text/css” href=“../resources/css/ext-all.css" />

　　<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>

　　<script type="text/javascript" src="../ext-all.js"></script>

　　<script  type="text/javascript">

　　　　　Ext.onReady(function(){

  　　Ext.Msg.alert('hello world','Hello World！');

　　　　　});

　　</script>

4.2 基本组件　

　　Ext JS的设计结构仿照了Java包和类的概念。所有组件都以类的形式存在，Ext是顶层包，使用时通过new关键字来创建。

     例如：var win = new Ext.Window({  //创建窗口

              el: 'window', //渲染

              300, //设置窗口宽度

              height: 150, //设置窗口高度

              title: 'window', //设置窗口标题

          });

         win.show(); //显示窗口

　　Ext JS中的对象也有静态方法，只要通过类名调用即可。

      例如： Ext.Msg.alert('Hello World', 'Hello World.');

4.3  工具栏组件　　

　　· ToolBar是用来存放功能按钮的容器；

　　· ToolBar中可以放置所有的FormPanel中的控件；

　　· ToolBar可以放置在Panel， FormPanel，GridPanel，TreePanel等容器中。

　　· Menu是一个菜单对象，也是一个容器，可以把所有其它的菜单项添加到其中。

五、Ext JS布局　　

　　·Accordion布局（Ext.layout.Accordion）

　　·Border布局（Ext.layout. BorderLayout）

　　·Column布局（Ext.layout. ColumnLayout）

　　·Form布局（Ext.layout. FormLayout）

　　·Fit布局（Ext.layout. FitLayout）

　　·Table布局（Ext.layout. TableLayout）

　　·Card布局（Ext.layout. CardLayout）

5.1 Accordion布局

　  Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。

　　在布局中配置不同的参数，会展示出不同的效果。如：animate为true，表示在执行展开折叠时是否应用动画效果。activeOnTop为true,表示在点击每一个子元素的头部名称或右边的按钮，则会展开该面板，收缩其它已经展开的面板，并将点击的那个面板置于顶部显示。

　　具体的各个控件的动作和效果大家可以参考API。

       

5.2 Border布局

　　Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, center 来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

　　

5.3 Column布局

         Column布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

       

5.4 Form布局

　　Form布局方式由类Ext.layout.FormLayout提供，定义的名称为form。一般情况只用于formPanel的布局，把formPanel中的各子元素按每行一列的方式进行布局显示。

    

5.5 Fit布局

　　Fit布局方式由Ext.layout. FitLayout类定义，名称为fit。填充布局方式是把容器中的子元素覆盖容器的整个区域。

     

六、总结

　　 Ext JS是一个强大的js类库

 　　Ext JS配置方便且兼容各种浏览器

 　　基于面向对象编程(oop)，并且以事件驱动模型为基础的。

 　　为创建富客户端应用(RIA)提供了丰富的组件对象

 　　和后台代码无关，不管是C#换是JAVA也或者PHP，都和它没关系

　　 相对丰富的文档和示例

 　　4.0版本提供了动画效果，提高了用户的感知度