Extjs-概述 基础知识
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.gif4.查询对象里面包含那些内容使用的方法
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