没有合适的资源?快使用搜索试试~ 我知道了~
ExtJS也就是Ext框架,官方网址为www.extjs.com,ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA(Rich Internet Application,富互联网应用系统)的 开源AJAX应用框架,使用的开源协议是GPL。 ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于UI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。
资源推荐
资源详情
资源评论
ExtJS 快速入门指南
一、ExtJS 框架简介 ........................................................................................................................ 1
二、如何使用 Ext ............................................................................................................................ 2
三、Ext 组件 .................................................................................................................................... 3
1、组件简介 ............................................................................................................................. 3
2、组件 XType ......................................................................................................................... 4
3、组件应用 ............................................................................................................................. 4
4、组件配置选项 ..................................................................................................................... 5
5、组件属性 ............................................................................................................................. 6
6、组件方法 ............................................................................................................................. 6
四、事件及事件响应 ....................................................................................................................... 7
五、Component 及 Container 简介 ............................................................................................... 10
1、Ext.Component ................................................................................................................. 10
2、Ext.Comtainer ................................................................................................................... 10
六、面板 Ext.Panel ........................................................................................................................ 11
面板 Panel 简介 ...................................................................................................................... 11
面板内容 ................................................................................................................................. 12
面板与 DOM 节点 DIV ......................................................................................................... 13
七、ViewPort ................................................................................................................................. 14
八、窗口 Window .......................................................................................................................... 17
九、对话框..................................................................................................................................... 18
十、TabPanel .................................................................................................................................. 22
十一、布局..................................................................................................................................... 26
十二、表格 Grid ............................................................................................................................ 29
十三、TreePanel............................................................................................................................. 30
十四、表单 Form ........................................................................................................................... 32
十五、理解 Html DOM、Ext Element 及 Component ................................................................. 34
十六、Ext 类中的 get 方法简介 ................................................................................................... 35
十七、如何学习及掌握 Ext .......................................................................................................... 37
一、ExtJS 框架简介
ExtJS 也就是 Ext 框架,官方网址为 www.extjs.com,ExtJS 是一个 Ajax 框架,是一个用
javascript 写的,用于在客户端创建丰富多彩的 web 应用程序界面。ExtJS 可以用来开发
RIA(Rich Internet Application,富互联网应用系统)的 开源 AJAX 应用框架,使用的开源协
议是 GPL。
ExtJS 是一个用 javascript 写的,主要用于创建前端用户界面,是一个与后台技术无关的
前端 ajax 框架。因此,可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。
ExtJs 最开始基于 UI 技术,由开发人员 Jack Slocum 开发,通过参考 Java Swing 等机制来组
织可视化组件,无论从 UI 界面上 CSS 样式的应用,到数据解析上的异常处理,都可算是一
款不可多得的 JavaScript 客户端技术的精品。
二、如何使用 Ext
首先从 ext 官方网站下载 ext 的 sdk,把 sdk 拷到 web 应用程序目录,然后即可在 web
页面中直接通过<script>标签引入 ext 的库文件,就可以使用 javascript 调用 ext 的各种控件。
下面是使用 Ext 的应用骨架代码:
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.2/ext-all.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.onReady(function(){
…///在这里面创建及使用 ext 控件。
});
</script>
大多数时候,用户的 js 文件放在一个单独的页面中,比如 app.js,因此一个 ext 应用就
可以改成由一个页面文件及一个或多个 js 文件组成,如下:
app.html 内容
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
app.js 的内容
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.onReady(function(){
var win=new Ext.Window({
title:"窗口",
width:500,
height:300,
html:"测试窗口"
});
win.show();
});
Ext.onReady 可能是你接触的第一个也可能是在每个页面都要使用的方法。这个方法会
在 DOM 加载全部完毕后,保证页面内的所有元素能被 Script 引用(reference)之后调用。
三、Ext 组件
1、组件简介
所谓组件,简单来说,就是指可以复用的应用程序组成部件。Ext 最大特点,就是拥有
一个庞大、功能齐全、结构及层次分明的组件体系,并在组件的基础上进一步封装出各种实
用的控件。我们在开发的时候,只需要直接使用这些组件及控件,就可以创建出丰富多彩的
应用程序界面。比如说窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件
及控件。
Ext 组件是由 Component 其及子类定义,每一种组件都有一个指定的 xtype 属性值,通
过该值可以得到一个组件的类型或者是定义一个指定类型的组件。我们学习及使用 Ext,其
实也就是学习 Ext 组件/控件的各种功能及使用方法。
ExtJS 中的组件体系由图 2-4 所示。
图 2-4 ExtJs2.0 组件继承结构图
2、组件 XType
在 Ext 中,每一个组件都有一个类来定义,比如说按钮组件的类是 Ext.Button 类,窗
口控件的类是 Ext.Window,树控件的类是 Ext.tree.TreePanel。除了可以通过类名来标识某一
种组件以外,Ext 还提出了一个 xtype 的概念,我们可以理解为组件类名的缩写,比如说
Ext.tree.TreePanel 类对应的类缩写名称为 treepanel。当一个组件创建了以后,我们可以通过
组件的 getXType()方法来得到这个组件的 xtype 值,还可以通过 getXTypes()方法来得到这个
组件所属的所有类名,比如:component/box/field/textfield。
xtype 的主要作用是通过在配置选项中指定 xtype 方的组件使用法,来实现组件的延迟
初始化
3、组件应用
在我们知道一个组件后,我们应该如何使用呢?现在我们就来看看组件的基本应用。组
件的使用方法大同小异,一般情况可以归纳为下面两种。
第一种就是前面我们已经接触到的使用 new 操作符来创建一个组件对象实例,然后通
过这个对象实例就能使用这个组件了。
第二种方法是当在定义父容器中的子元素时(这里的子元素也是组件),比如窗口中放
按钮、放树等。可以通过 xtype 这个属性来指定使用一个组件。下面拿 Ext.Panel 这一个组
件来说,我们要创建一个面板,可以直接使用 new Ext.Panel({})来进行创建。面板是一个容
器对象,他下面还可以包含很多其它的组件对象,这时可以通过调用他的 add 方法来往里面
加入面板中的子元素。来看代码:
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.add(new Ext.Button({text:"按钮一"}));
panel.add(new Ext.Panel({title:"子面板"}));
在上面的三句代码中,通过三个new操作符,很明显可以看出我们一共使用到了三个Ext
组件,也就是创建了两个Panel对象及一个按钮对象,这是非常容易理解的。
如果通过xtype的方式来使用组件,上面的代码可以改下如下的形式:
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.add({xtype:"button",text:"按钮一"});
panel.add({title:"子面板"});
第一个 Panel 的 new 操作符是不能省略的,因为在这里他是父容器。第二条语句,通过在
大括号中指定 xtype 值为 button,来表示添加一个按钮到面板里面,第三行语句连 xtype 都
没有指定,因为默认情况下 xtype 就是指 panel。
当然,我们可以在创建父容器的时候,在构造函数中通过 items 这个属性来指定他下面的
子元素,因此上面的代码可以连起来写成下面的形式(这也是常见的形式):
var panel=new Ext.Panel({title:"面板",width:500,height:300,
items:[{xtype:"button",text:"按钮一"},{title:"子面板"}]
});
我们把前面通过 add 方法添加的组件直接写在了 items 中,items 的值在这里是一个数组。
那么,使用 new 操作符与使用 xtype 指定组件的方式最大的区别在哪儿呢?最主要的一
点是使用 new 操作符的话会立即创建对象,而使用 xtype 则不会立即创建对象,他会在特定
的时刻,需要的时候(也就是当父容器渲染的时候)才会创建对象,也就说是使用 xtype 可以
实现组件对象的延迟创建,这对于节约内存、提升性能来说是比较关键的。
4、组件配置选项
接下来看一看 Ext 组件的另外一特性,也就是配置选项。配置选项是 Ext 组件非常重要
的特性,在大多数 Ext 组件中,都支持在构造函数中传递一个对象作为参数,在这个对象中
包含组件的详细描述信息,比如多高、多宽、有多少子元素等等,Ext 就是根据这些参数来
创建组件对象的。前面也讲了,在指定子元素时,可以不使用 new 操作符,而是直接使用
配置选项来指定要使用的组件特性,并在配置选项中通过 xtype 这个属性来指定组件的类型。
一个组件具体有哪些配置选项,以及这些配置选项的作用是什么呢?这时我们就需要查询
Ext 组件的 API,API 中最前面的一节 Config Options 就是介绍组件的详细配置选项。
当一个组建创建以后,他会在何时,在页面的哪个位置进行显示呢?比如说刚才的面板
Panel 的示例,在页面上并没有看见这个面板。虽然我们使用了 new 操作符来初始化了这个
组件对象,但他并不会在页面中显示。组件要显示的前提是要渲染(Render),组件只有在渲
染 Render 以后,才会在页面中显示。让组件渲染及显示的方法有下面几种:
1、 在组件创建以后直接调用组件的 render( [Mixed container], [String/Number position] )
方法,这里的参数是一个复合参数,可以强制指定把组件渲染到页面中的某一个节
点;比如 panel.render("test")。
2、 直接在配置选项中通过 renderTo 属性来指定把组件渲染到页面中的某一个节点。
3、 直接在配置选项中通过 applyTo 属性来指定组件渲染到某一个节点的父节点。
4、 通过在配置选项中指定 el 参数,然后直接调用 render 方法来渲染组件。
5、 使用 show()方法显示组件,每一个组件只渲染一次,渲染后的组件就能通过 DOM
在页面中找到,一般情况下组件渲染后就会显示出来,如果在配置选项中指定了
hidden 属性为 true 则不会显示(或者是调用了组件对象的 hide 方法),此时需要通
过调 show()方法来显示组件。
下面是这
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.render("test");
var panel=new Ext.Panel({title:"面板",width:500,height:300,renderTo:"test"});
var panel=new Ext.Panel({title:"面板",width:500,height:300,applyTo:"test1"});
var panel=new Ext.Panel({title:"面板",width:500,height:300,el:"test"});
panel.render();
var panel=new Ext.Panel({title:"面板",width:500,height:300,el:"test"});
panel.show();
剩余37页未读,继续阅读
资源评论
Houkouki
- 粉丝: 34
- 资源: 36
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功