Extjs-概述基础知识

最新推荐文章于 2019-06-17 09:14:41 发布

原创最新推荐文章于 2019-06-17 09:14:41 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #javascript #ext #prototype #include #html

Extjs 专栏收录该内容

42 篇文章

订阅专栏

本文深入解析Ext框架的下载方法、目录结构、核心组件及其在项目中的应用，包括adapter、docsext、examples、pkgsext、resources、srcext等组件的作用，以及如何在项目中正确引用和使用ext-all.js、adapter/ext/ext-base.js、ext-lang-zh_CN.js、resources目录等内容。此外，还介绍了Ext的事件和类的概念，如自定义事件、浏览器事件、事件管理器Ext.EventManager以及如何通过Ext.onReady和Ext.EventManager.onWindowResize进行事件监听。最后，文章详细阐述了如何利用Ext的事件对象进行事件处理，并提供了简单的Ext页面示例。

1. 下载 http://www.sencha.com/download

2.ext-3.4.0目录介绍

adapterext的核心代码和底层库,包括jQuery,Prototype和YUI的适配器
docsext的文档,其实主要和最重要的是ext的API
examples官方演示例子
pkgsext压缩后的代码,经过压缩的代码,体积小,加载快
resourcesext用到的图片文件和样式文件,ext绚丽外观全部由这个目录控制
srcext源文件,也就是相对plgs目录而言,未经过压缩的代码
ext-all.jsext的核心库,是必须引用的
ext-all-debug.jsext-all.js的调试版,在调试时使用这个调试版本的文件才能正确定位出现错误的位置
INCLUDE_ORDER.txt用来说明页面引用底层库的JavaScript文件的顺序
LICENSE.txt是ext的使用许可文件

3.项目中使用ext必须的内容包括

ext-all.js						包含ext的所有功能,所有的JavaScript脚本都在这里
adapter/ext/ext-base.js
src/locale/ext-lang-zh_CN.js	简体中文国际化资源文件
resources						CSS样式表和图片
必须添加空白页面Ext.BLANK_IMAGE_URL=/ajaxext/resources/images/default/s.gif

4.查询对象里面包含那些内容使用的方法

for(var i in element){
	alert(i)
}

5.简单Ext页面

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" defer>
		Ext.onReady(function(){

		});
	</script>
  </head>
  <body>
  </body>
</html>

6. Ext的事件和类
ext的事件分为两种类型:自定义事件和浏览器事件
6.1自定义事件

ext中遵循一种树状的事件模型,
所有继承自Ext.util.Observable类的控件都可以支持事件,
可以为这些继承Ext.util.Observable的对象定义一些事件,然后为这些事件配置监听器,
当某个事件被触发了,Ext会自动调用对应的监听器,这些就是Ext的事件模型

6.2浏览器事件
代码1:

var e = document.getElementById('lwc');
e.onclick = function() {
    alert("handle1");
};
e.onclick = function() {
    alert("handle2");
};

代码2:

Ext.onReady(function(){
    var test = Ext.get('lwc');
    test.on('click', function() {
        alert("handle1");
    });
    test.on('click', function() {
        alert("handle2");
    });
});

7.Ext.EventManager事件管理器

定义了一系列的事件相关的处理函数,其中最常见的有,
onDocumentReady所有HTML元素都加载完成后才调用此函数, 就是我们常用的Ext.onReady()
onWindowResize监听浏览器窗口改变,因为监听的是window对象,这个对象打开就存在,不必放在onReady里面,
onTextResize工具函数,监听用户修改浏览器的文字大小,必须包含在onReady里面),
Ext.EventManager.onWindowResize(function(width,height){
	alert('宽:'+width+' 高:'+height);
});			
Ext.onReady(function(){
	Ext.EventManager.onTextResize(function(oldSize,newSize){
		alert('改变前字体大小:'+oldSize+' 改变后字体大小:'+newSize);
	});
});

8. Ext.EventObject对事件的封装

它将ext自定义事件和浏览器事件结合在一起使用,它定义了一系列的功能按键,处理按键事件不用再背ASCII码了

名称			ASCII码	名称		ASCII码
Backspace	8		pagedown	34
tab			9		End			35
Return		13		Home		36
Enter		13		Left		7
Shift		16		Up			38
Control		17		Right		39
Esc			27		Down		40
Space		32		Delete		46
Pageup		33		F5			116