Ext2.x学习笔记

Ext2.X学习笔记一

一、ExtJS简介

 1.1 什么是Ext JS?

· Ext JS是一个Ajax框架,可以用来开发富客户端的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

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

Ext2.x学习笔记

  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 等文件。

      Ext2.x学习笔记

3.2  控件

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

Ext2.x学习笔记

3.3 实用工具

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

Ext2.x学习笔记

四、Ext JS基础组件

     Ext2.x学习笔记

  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', //渲染

width: 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。
        Ext2.x学习笔记
5.2 Border布局
  Border布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, center 来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。
  Ext2.x学习笔记

5.3 Column布局

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

Ext2.x学习笔记

5.4 Form布局

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

Ext2.x学习笔记

5.5 Fit布局

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

Ext2.x学习笔记

六、总结

   Ext JS是一个强大的js类库

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

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

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

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

   相对丰富的文档和示例

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

 
上一篇:Building a high performance JSON parser


下一篇:Python中的下划线(转)