当前位置:首页 > 开发 > Web前端 > Ext > 正文

EXT学习记录

发表于: 2015-05-01   作者:tntxia   来源:转载   浏览:
ext
摘要:   1. 准备   (1) 官网:http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ,但extjs这个域名会自动转到sencha上。   (2)帮助文档:   想要查看EXT的官方文档的话,可以去这里h

 

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学习记录

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
VeiwPort代表整个浏览器显示区域,该对象渲染到页面的body区域,并会随着浏览器显示区域的大小自动
一、学习目标:学以致用,服务工作 二、方法:先看《EXT手册.CHM》,每看一章(学),接着照着里边的
1.首先,要下载ext,解压后,将其存放到WebRoot目录下。 2.建立test目录,在目录下新建一个hellowor
1.首先,要下载ext,解压后,将其存放到WebRoot目录下。 2.建立test目录,在目录下新建一个hellowor
Ext学习总结 一、 1.同样的程序在IE和FireFox中显示不同 因为Extjs默认字体是11px,11px是一种边缘字
看效果图: 前台代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
要了解EXT2.0的布局,首先应该了解EXT布局类的结构,下图为EXT2.0布局类纵览 Ext2.0版的布局类,最
如数据格式如下: <? xml version = "1.0" encoding = "UTF-8" ?> < Bills > < Bill
1. 下载fckeditor的包。 http://ckeditor.com 官网. 我就直接进入下载与java关联的一个项目. https:/
Ext中的事件机制 Ext中的事件机制是在 Ext.util.Observable 中定义的,举一个例子来说明事件机制,
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号