什么是EXT?
–Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。
–Ext是一个用javascript编写,与后台技术无关的前端ajax框架。因此,可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。
下载EXT2.0
开发人员必备的中文手册
EXT学习以及资源不错的网站
下载好以后解压缩
•adapter :负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。
•build :压缩后的ext全部源码(里面分类存放)。
•docs : API帮助文档。
•exmaples:提供使用ExtJs技术做出的小实例。
•resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。
•source :无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的协议。
•ext-all.js :压缩后的Ext全部源码。
•ext-all-debug.js :无压缩的Ext全部的源码(用于调试)。
•ext-core.js :压缩后的Ext的核心组件,包括sources/core下的所有类。
•ext-core-debug.js :无压缩Ext的核心组件,包括sources/core下的所有类。
第一个例子--弹出框
引入文件
- <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
- <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="extjs/ext-all.js"></script>
说明:
•样式文件为resources/css/ext-all.css
•库文件主要包含两个:adapter/ext/ext-base.js及ext-all.js
•其中ext-base.js是框架基础库,ext-all.js是extjs的核心库。
要加:<meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 不然会中文乱码
测试
- <script type="text/javascript" language="javascript">
- Ext.onReady(function(){
- Ext.Msg.alert('系统提示','操作已经成功!');
- });
- </script>
效果图:
获取对象节点
•getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。 (与getElementById是一个效果)
•Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
•//Html页面中包含一个id为hello的div,代码如下:
<div id="hello">aaa</div>
<div id="hello">aaa</div>
Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。
新建一个panel
- <html>
- <head><title>Getting Started Example</title>
- <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
- <link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
- <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="extjs/ext-all.js"></script>
- <script type="text/javascript" language="javascript">
- Ext.onReady(function(){
- var myPanel=new Ext.Panel({
- id:"myFirstPanel",
- title:"旧的标题",
- renderTo:"hello",
- width:300,
- height:200
- });
- Ext.getCmp("myFirstPanel").setTitle("新的标题");});
- </script>
- </head>
- <body>
- <div id="hello"></div>
- </body>
- </html>
效果图:
注释//Ext.getCmp("myFirstPanel").setTitle("新的标题");
再看效果:
•getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法中只有一个参数,也就是组件的id。
•getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。
也可以直接在body上增加panel
- Ext.onReady(function(){
- var myPanel=new Ext.Panel({
- id:"myFirstPanel",
- title:"旧的标题",
- renderTo:Ext.getBody(),
- width:300,
- height:200
- });
基本表单
- Ext.onReady(function(){
- var movie_form = new Ext.FormPanel({
- url: 'movie-form-submit.php',
- renderTo: document.body,
- frame: true,
- title: '信息填写',
- width: 250,
- items: [{
- xtype: 'textfield',
- fieldLabel: '标题',
- name: 'title'
- },{
- xtype: 'datefield',
- fieldLabel: '日期',
- name: 'released'
- }]
- });
- });
效果图: