EXT学习

来源：互联网发布：长度知乎编辑：程序博客网时间：2024/05/13 02:26

什么是EXT？

–Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。

–Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。

下载EXT2.0

官方下载地址：
http://extjs.com/deploy/ext-2.0.2.zip

开发人员必备的中文手册

http://extjs.org.cn/node/125

EXT学习以及资源不错的网站

http://extjs.org.cn/

下载好以后解压缩

•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下的所有类。

第一个例子--弹出框

引入文件

view plaincopy to clipboardprint?

<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>

<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"> 不然会中文乱码

测试

view plaincopy to clipboardprint?

<script type="text/javascript" language="javascript">
Ext.onReady(function(){
Ext.Msg.alert('系统提示','操作已经成功!');
});
</script>

<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);

});

•//Html页面中包含一个id为hello的div，代码如下：

<div id="hello">aaa</div>

Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。

新建一个panel

view plaincopy to clipboardprint?

<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>

<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

view plaincopy to clipboardprint?

Ext.onReady(function(){
var myPanel=new Ext.Panel({
id:"myFirstPanel",
title:"旧的标题",
renderTo:Ext.getBody(),
width:300,
height:200
});

Ext.onReady(function(){var myPanel=new Ext.Panel({id:"myFirstPanel",title:"旧的标题",renderTo:Ext.getBody(),width:300,height:200});

基本表单

view plaincopy to clipboardprint?

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'
}]
});
});

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'}]});});

效果图：