`
tntxia
  • 浏览: 1488397 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

 

 
 
 
 
 
 
 


 

 

 

0
顶
0
踩
分享到：
| javascript学习笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics