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

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

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

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。
       
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版本提供了动画效果,提高了用户的感知度

 

Ext2.x学习笔记的更多相关文章

  1. GRUB学习笔记(转自http://www.cnblogs.com/evilzy/archive/2008/03/30/1130173.html)

    grub学习笔记1 首先要了解的几个概念 1.1 启动管理器 启动管理器是存储在磁盘开始扇区中的一段程序,例如,硬盘的MBR(Master Boot Record),在系统完成启动测试后,如果系统是从 ...

  2. linux 驱动学习笔记01--Linux 内核的编译

    由于用的学习材料是<linux设备驱动开发详解(第二版)>,所以linux驱动学习笔记大部分文字描述来自于这本书,学习笔记系列用于自己学习理解的一种查阅和复习方式. #make confi ...

  3. AM335x(TQ335x)学习笔记——挂载Ramdisk

    上篇文章中我们已经能够通过u-boot启动内核了,但是没有能够启动成功,从内核的log中可以看出,内核启动失败的原因是没有挂载到root文件系统,本文将使用busybox制作根文件系统并打包成ramd ...

  4. alfs学习笔记-自动化构建lfs系统

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一名linux爱好者,记录构建Linux From Scratch的过程 经博客园-骏马金龙前辈介绍,开始接触学习lfs,用博客 ...

  5. Linux文件与目录管理(学习笔记)

    本笔记为<鸟哥linux私房菜>第六章学习笔记 一.目录与路径 相对路径与绝对路径 绝对路径:一定由根目录 / 写起              正确度比较好 相对路径:不是由 / 写起  ...

  6. 兄弟连Linux运维学习笔记

    最新经典linux运维兄弟连Linux运维学习笔记... --------------- 全程1.5倍播放.加油我一定可以学完Linux----------------------Unix与Linux ...

  7. lfs(systemd版本)学习笔记-第4页

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd版本)学习笔记-第3页 的地址:https://www.cnblogs.com/renren-study- ...

  8. lfs(systemv版本)学习笔记-第4页

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemv版本)学习笔记第3页:https://www.cnblogs.com/renren-study-notes ...

  9. Linux 学习笔记之超详细基础linux命令 Part 8

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 7----------------- ...

随机推荐

  1. ELK 5.0 组件后台启动

    elasticsearch 后台启动,只需要 在bin目录下执行: ./elasticsearch -d 查看是否启动成功使用: ps aux|grep elasticsearch kibana 后台 ...

  2. JAVA里的异常

    一.概念和分类 JAVA程序设计语言中,异常对象都是Throwable类的一个实例.Throwable分为Error和Exception. 其中,Error类层次结构描述了JAVA运行时系统的内部错误 ...

  3. vijos1909寻找道路

      描述 在有向图 G 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到 终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向的点都直接或间接与终点连通. 在满足条件 1 ...

  4. BZOJ2888 资源运输(LCT启发式合并)

    这道题目太神啦! 我们考虑他的每一次合并操作,为了维护两棵树合并后树的重心,我们只好一个一个的把节点加进去.那么这样一来看上去似乎就是一次操作O(nlogn),但是我们拥有数据结构的合并利器--启发式 ...

  5. wpf 报错: 在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh”。

    今天修改Bug的时候遇到一个问题: datagrid 设置了双击事件,双击弹出一个窗口,在多次点击后报错:在 AddNew 或 EditItem 事务过程中不允许“DeferRefresh” 网上查了 ...

  6. hdu 3065 AC自动机

    // hdu 3065 AC自动机 // // 题目大意: // // 给你n个短串,然后给你一个长串,问:各个短串在长串中,出现了多少次 // // 解题思路: // // AC自动机,插入,构建, ...

  7. 转 jdk1.5新特性 ConcurrentHashMap

    ConcurrentHashMap特点:效率比Hashtable高,并发性比hashmap好.结合了两者的特点.   集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持 ...

  8. xcode6如何支持空模板

    Single View Application 改成空模板的歩揍(xcode6.0.1): 1.删除info.plist 中的Main Storyboard file base name 选项 2.将 ...

  9. ELb表达式

    主要用于servlet的4个作用域取值:pageScope.requestScope.sessionScope.applicationScope 取值顺序依次从小到大.取值方式如:操作javabean ...

  10. web攻防

    1.内网渗透端口转发: 在被控制机上执行: lcx.exe -slave 216.32.*.*(一个外网ip) 51  192.168.2.32(内网ip)  端口号 在本机上执行: lcx.exe ...