EXT学习记录

最新推荐文章于 2025-08-22 19:09:26 发布

J2虾虾

最新推荐文章于 2025-08-22 19:09:26 发布

阅读量116

点赞数

文章标签： javascript ViewUI

1. 准备

（1）官网：http://www.sencha.com/

里面有源代码和API文档下载。

EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。

（2）帮助文档：

想要查看EXT的官方文档的话，可以去这里http://dev.sencha.com/deploy/dev/docs/

如果想联网也可以浏览，ext解压包里面的doc文件夹，里面就是官方详细的详细的文档。

当然你必须把文件部署在服务器。

关于帮助文档的说明：

xtype：组件的别名
Hierarchy 层次结构
Inherited mixins 混入的类
Requires 该组件需要使用的类
configs：组件的配置信息
properties：组件的属性
methods：组件的方法
events：组件的事件

（3）Hello world

这里，我们写一个HelloWorld：

<!DOCTYPE html>
<html>
<head>
  <title>EXT第一个测试的例子</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="ext.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.Msg.alert('test', 'hello world!!!');
	});
  </script>
 </head>

运行后，我们发现我们的程序弹出一个警告，显示hello world!!，说明我们已经调用了EXT的onReady事件。也说明，我们跨出EXT的第一步。

EXT.onReady是EXT的准备函数，类似于onload方法，在所有Dom加载完成后执行。

2. 基础组件

（1） Ext.window.MessageBox

MessageBox是一个入门的组件，，我们它来输出一些信息。

主要包括如下方法：

A. alert方法

使用后，产生一个模态的对话框，alert方法包括两个参数，第一个参数是标题，第二个参数是内容。
B. confirm方法

可以返回确认和取消
C. prompt方法

可以在里面输入一些东西
D. wait方法

一个等待对话框
E. show方法

非常灵活，可以定义我们所需要显示的按钮。

（2） Ext.window.Window

窗口组件，示例：

Ext.onReady(function(){
		Ext.create('Ext.window.Window', {
			constrain : true,
			title: 'Hello',
			height: 200,
			width: 400
		}).show();
	});

一些常用的配置：

constrain:布尔值，true为限制窗口只能在其容器内移动，默认值为false，允许窗口在任何位置移动。(另：constrianHeader属性)
modal:布尔值，true为设置模态窗口。默认为false
plain：布尔值，true为窗口设置透明背景。false则为正常背景，默认为false
x、y 设置窗口左上角坐标位置。
onEsc：复写onEsc函数，默认情况下按Esc键会关闭窗口。
closeAction：string值，默认值为'destroy'，可以设置'hide'关闭时隐藏窗口
autoScroll：布尔值，是否需要滚动条，默认false

如何实现点击只弹出一个窗口：

<!DOCTYPE html>
<html>
<head>
  <title>EXT第一个测试的例子</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
  <link rel="stylesheet" href="../resources/css/ext-all.css" type="text/css" />
  
  <script type="text/javascript" src="../ext-all.js"></script>
  <script type="text/javascript">
  
	var win = Ext.create('Ext.window.Window', {
		constrain : true,
		title: 'Hello',
		height: 200,
		width: 400,
		closeAction:'hide'
	});
	
	function showWin(){
		win.show();
	};
  </script>
 </head>
 <body>
 <button onclick="showWin()">点击</button>
 </body>
 </html>

注意这里closeAction应该设置为hide

3. 主题

Ext提供了很多套主题，可以让你定制一些界面，更换主题，只需要修改相应的CSS文件就行。

比如：

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/ext-all-gray-debug.css">

一些Ext的实例：

http://tntxia.iteye.com/blog/2207857

Ext创建全名空间：

Ext.namespace("my.namespace");

my.namespace.app = function() {
	return {
		test : function(){
			console.log("test");
		}
	}
}

my.namespace.app().test();