EXT学习记录

 

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

 

 
 
 
 
 
 
 


 

 

 

你可能感兴趣的:(ext)