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。
解压缩包之后的目录如下图所示:
Ext JS开发包介绍
adapter:Ext的底层库和核心代码
docs:Ext提供的API,即帮助文档
examples:官网提供的演示示例
resources:主要存放的是样式文件和图片文件
src:存放源码文件
ext-all:Ext的核心库,是主文件
二、Ext 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>
开发利器Spket——是一款全面支持JavaScript的免费开发工具。它有插件版和IDE两种版本,我们选择插件版可以将它集成到Eclipse,这样我们就可以快速开发Ext JS应用了。
官方网站:www.spket.com。
WindowàPreferences选项,在窗口左边可以看到Spket菜单项。选择JavaScript Profiles,点New先创建ExtJS选项,再点Add Library,选择插件文件ext.jsb2,最后选择中所有的选项即可。
三、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组件的生命周期,包括创建、渲染和销毁。它们也自动支持了标准的隐藏、显示以及启用、禁用等操作。
基本组件——Window、Panel、Button、Grid等
表单组件——Form、Textfield等
工具栏组件——ToolBar、Menu等
第一个应用——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>
例如:var win = new Ext.Window({ //创建窗口
el: 'window', //渲染
width: 300, //设置窗口宽度
height: 150, //设置窗口高度
title: 'window', //设置窗口标题
});
win.show(); //显示窗口
例如: 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,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。
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配置方便且兼容各种浏览器
基于面向对象编程(oop),并且以事件驱动模型为基础的。
为创建富客户端应用(RIA)提供了丰富的组件对象
和后台代码无关,不管是C#换是JAVA也或者PHP,都和它没关系
4.0版本提供了动画效果,提高了用户的感知度
Ext2.x学习笔记的更多相关文章
- GRUB学习笔记(转自http://www.cnblogs.com/evilzy/archive/2008/03/30/1130173.html)
grub学习笔记1 首先要了解的几个概念 1.1 启动管理器 启动管理器是存储在磁盘开始扇区中的一段程序,例如,硬盘的MBR(Master Boot Record),在系统完成启动测试后,如果系统是从 ...
- linux 驱动学习笔记01--Linux 内核的编译
由于用的学习材料是<linux设备驱动开发详解(第二版)>,所以linux驱动学习笔记大部分文字描述来自于这本书,学习笔记系列用于自己学习理解的一种查阅和复习方式. #make confi ...
- AM335x(TQ335x)学习笔记——挂载Ramdisk
上篇文章中我们已经能够通过u-boot启动内核了,但是没有能够启动成功,从内核的log中可以看出,内核启动失败的原因是没有挂载到root文件系统,本文将使用busybox制作根文件系统并打包成ramd ...
- alfs学习笔记-自动化构建lfs系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一名linux爱好者,记录构建Linux From Scratch的过程 经博客园-骏马金龙前辈介绍,开始接触学习lfs,用博客 ...
- Linux文件与目录管理(学习笔记)
本笔记为<鸟哥linux私房菜>第六章学习笔记 一.目录与路径 相对路径与绝对路径 绝对路径:一定由根目录 / 写起 正确度比较好 相对路径:不是由 / 写起 ...
- 兄弟连Linux运维学习笔记
最新经典linux运维兄弟连Linux运维学习笔记... --------------- 全程1.5倍播放.加油我一定可以学完Linux----------------------Unix与Linux ...
- lfs(systemd版本)学习笔记-第4页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd版本)学习笔记-第3页 的地址:https://www.cnblogs.com/renren-study- ...
- lfs(systemv版本)学习笔记-第4页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemv版本)学习笔记第3页:https://www.cnblogs.com/renren-study-notes ...
- Linux 学习笔记之超详细基础linux命令 Part 8
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 7----------------- ...
随机推荐
- viewpage 循环滑动播放图片
一般来说,viewpage 只支持图片的顺序滑动播放,在滑到边界时就再也滑不动了,如果要想继续滑动,只能向两边额外增加一张相片,即把第一张相片的位置放在最后一张图片的后面,给用户的感觉我继续滑就滑到了 ...
- 数据分析和R语言的那点事儿_1
最近遇到一些程序员同学向我了解R语言,有些更是想转行做数据分析,故开始学习R或者Python之类的语言.在有其他编程语言的背景下,学习R的语法的确是一件十分简单的事.霸特,如果以为仅仅是这样的话那就图 ...
- POJ 2352 Stars(树状数组)
Stars Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 30496 Accepted: 13316 Descripti ...
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- H 1022 Train Problem Ⅰ
题意:给我们两个序列,看能否通过压栈,出栈将第一个序列转换成第二个. 思路:将序列 1 依次压栈,同时看是否和序列 2 当前元素相同 代码如下: #include<iostream> #i ...
- Mac os x下配置nginx + php
一直都没使用过PHP的,最近leader推荐使用他在维护的一个移动端的js框架,在本地合并压缩使用的是php环境处理的,so,只能是搭一个PHP的环境了.一直使用的本地代理服务器都是nginx,虽然P ...
- Linux 常用工具小结:(5) lftp工具使用
Linux 常用工具小结:(1) lftp工具使用. 这里会按照一些比较常用的功能列出,并举一个具体的例子逐一解释功能. 通常使用ftp过程是登陆ftp,浏览ftp内容,下载ftp文件,或者上传ftp ...
- linux琐碎命令学习
kill -l会把linux的信号都列出来.1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP6) SIGABRT 7) SIGBUS 8) SIG ...
- 剑指offer算法_位运算求和
不用+,-,*,/运算求和,可以分成三步: 1.计算两个数字的异或值,相当于只计算每一位的和,不计算进位,得出结果sum: 2.计算两个数字的与值,相当于求出两个数字的进位,然后左移一位,相当于进位, ...
- Byte,TBytes,array of Byte, array[0..9] of byte的区别
Byte前面已经说是存放bit的单元,是电脑内存的基本单位,byte表示0-255中的256个数字 下面为Byte的用法: var B: Byte; // 表示0-255的数字 begin B := ...