01_ExtJS_HelloWorld
1, 什么是Ext?
Ext是一个Ajax框架，用于在客户端创建丰富多彩的web应用程序界面，是在Yahoo! UI的基础上发展而来的。官方网址：http://www.extjs.com/ 现在改为:www.sencha.com。
ExtJS是一个用来开发前端应用程序界面的JS框架，借鉴Swing等思想，提供了一套完整的组件库及强大的ajax支持功能，可以用Ext来开发基于Ajax的富客户端应用.
2, 基于传智播客 蔡世友 的讲解作的笔记（ExtJS3.4.0版本的，4.X与3.x版本是有很大区别的）
链接: http://pan.baidu.com/s/1Apn4a 密码: ztm7 我的网盘下载地址:
3, helloWorld 例子
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello-Extjs</title>
</head>
<!-- 这里是基于 Ext-JS 3.4.0版本的-->
<!-- 1,引入ExtJS的样式 -->
<link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" type="text/css"/>
<!--2,引入ExtJS的底层驱动[可以是Ext自己的，也可以是其它框架的]，
如果是第三方的还要引入其它的js库，比如jquery -->
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<!-- 引入ExtJS的库 -->
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
<script>
// 通过 Ext.onReady()开始调用Ext组件; 它的参数是一个回调函数
Ext.onReady(new function(){
//创建Ext窗口
var win=new Ext.Window({
width:400,
height:300,
title:'hello ext window',
buttons:[
{text:'ok'},
{text:'cancel'}
]
});
//显示窗口
win.show();
});
</script>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello-Extjs</title>
</head>
<!-- 这里是基于 Ext-JS 4.2.1版本的-->
<!-- ExtJS的样式 -->
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" type="text/css"/>
<!-- ExtJS的库 -->
<script type="text/javascript" src="ext-4.2.1/ext-all.js"></script>
<!-- 国际化文件-->
<script type="text/javascript" src="ext-4.2.1/ext-lang-zh_CN.js"></script>
<script>
// 通过 Ext.onReady()开始调用Ext组件; 它的参数是一个回调函数
Ext.onReady(function(){
Ext.MessageBox.alert("提示信息","hello world");
});
</script>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 基于ExtJS 5.1.0 -->
<!-- 引入CSS -->
<link rel="stylesheet" href="extjs5/classic/ext-theme-classic-all-debug.css" type="text/css">
<!-- 引入ExtJS -->
<script type="text/javascript" src="extjs5/ext-all-debug.js" ></script>
<!-- 引入国际化文件 -->
<script type="text/javascript" src="extjs5/ext-locale-zh_CN.js"></script>
<script type="text/javascript" src="js/helloworld.js"></script>
</head>
<body>
</body>
</html>
// helloworld.js
Ext.onReady(function(){
Ext.MessageBox.alert("提示","hello world！");
});
树的小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello-Extjs</title>
</head>
<link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" type="text/css"/>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
<script>
// 通过 Ext.onReady()开始调用Ext组件; 它的参数是一个回调函数
// 显示树的函数
function showTree(){
// 1,组件初始化的过程，参考Componet.js的构造函数，它是组件类的父类
var tree=new Ext.tree.TreePanel({
title:"小树一棵",
width:200,
height:200,
//renderTo:'hello', 有这个属性，就可以直接显示
root:new Ext.tree.AsyncTreeNode({
text:"树根",
children:[
{text:"叶子1",
leaf:true},
{text:"叶子2",
leaf:true}]
})
});
//2, 组件的渲染,就会在页面上显示
tree.render('hello');
}
Ext.onReady(showTree);
</script>
<body>
<div id="hello"></div>
</body>
</html>
4, 相关一些知识点
为了防止没有传递对象而出错时，我们可以 obj = obj||{}; 从而避免写if else
Ext对象的拷贝 Ext.apply(a,b); 将b对象拷贝到a对象中.
Ext.get("id1"); 通过Id获得元素
5, Ext的事件.
Ext的事件支持体现在两个方面，首先是对浏览器默认事件进行了进一步的扩展及封装，比如在Event对象的基础上提供了一个EventObject，提供了全局的事件管理器，灵活多变的事件响应方法，比如说在事件发生后几秒才响应事件，或者事件队列等功能。
02_Ext_Event.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJS-event</title>
<link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" type="text/css"/>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="02_Ext_Event.js"></script>
</head>
<body>
<div id="hello">hello</div>
<a id="link1">普通链接</a>
</body>
02_Ext_Event.js
Ext.onReady(function(){
// 获得Ext对象
Ext.get("link1").on('click',function(e){
// 这个e是ext的 EventObject
// 第一个参数 事件名称，第二个参数 执行的函数，第三个参数 作用域 ， 第四个参数 可选参数
alert(e);
},this,{delay:2000});
//delay:2000 延迟执行 single:true 只执行一次 buffer:200 200毫秒内只执行一次
});
所有支持事件的东西都继承自 Ext.util.Observable类 ，而Ext组件的基类Component就是继承自这个类；在这个里面可以找到我们常用的 on、un、andEvent、andListener等方法
有的组件都有一个render事件，而这个事件是在组件渲染完以后会触发， 这时我们就可以通过监听这个事件来实现在组件渲染后执行特定的操作
before开头的事件，返回false时就会阻止其默认行为。
<div id="btn"></div>
var btn1=new Ext.Button({text:'firstButton'});
// 将button渲染到 id为btn的div中
btn1.render('btn');
//函数可以有参数，有什么参数，就参考相应的组件的事件方法
btn1.on('click',btnClick);
var btn2=new Ext.Button({text:'secondButton'});
btn2.render('btn');
btn2.on('click',btnClick);
function btnClick(btn,event){
var win=new Ext.Window({title:btn.text,width:300,height:200});
// 这里讲解一个 before开头的事件,返回false时，就会阻止事件的发生
win.on('beforeshow',function(win){
//当返回false时，就不会显示窗口
return confirm("确定要显示吗?");
});
win.show();
}
Ext比较核心的组件
Observable：支持事件监听相关的
Component： 组件，所有Ext控件相关的
BoxComponent：有形状的组件
Container： 容器
Panel： 面板
善于查AP 具体的类，有哪些配置项，哪些属性，哪些方法，哪些事件都可以在API中查到
<script>
// 通过 Ext.onReady()开始调用Ext组件; 它的参数是一个回调函数
Ext.onReady(function(){
//创建Ext窗口
var win=new Ext.Window({
width:400,
height:300,
title:'hello ext window',
maximizable:true,
minimizable:true, //窗口的最小化只是一个样子，没有任何效果
minimize:function(){ //可以重写这个方法来最小化
//win.hide(); //隐藏窗口
//实现最小化功能是比较复杂的
},
buttons:[
{text:'创建包含树的窗口',
listeners:{
click:function(){
var tree=new Ext.tree.TreePanel({
title:"小树一棵",
width:200,
height:200,
root:new Ext.tree.AsyncTreeNode({
text:"树根",
children:[
{text:"叶子1",
leaf:true},
{text:"叶子2",
leaf:true}]
})
});
var win=new Ext.Window({
width:200,
height:200,
title:'显示树的窗口',
// 窗口是一个容器 ，在 窗口中添加子元素用 items，它可以接收数组或者对象
items:tree
});
// 除了用items加子元素之外，也可使用容器的add()方法添加元素
win.show();
}
}
},
{text:'创建新窗口',
// 为按钮添加事件
listeners:{
click:function(){
var win=new Ext.Window({
width:200,
height:200,
title:'win'
});
win.show();
}
}
}
]
});
//显示窗口
win.show();
});
</script>
01_ExtJS_HelloWorld的更多相关文章
随机推荐
- JS基础属性跟运算
小编这周学了JS函数基础知识跟运算!!下面就迫不及待跟大家分享一下 [switch case的结构写法] 结构写法:(略) 2注意事项: ①switch结构()中的表达式.可以使用各种js支持的数据类 ...
- mutex和CRITICAL_SECTION，互斥和临界区
本文不没有任何知识可讲,只是帖上自己测试的结果. 想看底层原理的可以直接关闭. 不过对于急着要选方案的人,倒提供一些帮助. 先说一些无关紧要的废话: ========================= ...
- 总结找到后台路径的N总思路方法
1, 穷举猜解 现如今可以暴力猜解网站后台登陆地址的软件有很多,从最早的啊D注入工具开始,一直到现在很多常用的工具(通常为SQL注入利用工具)都会带有后台登陆地址猜解的功能. 当然了,这个猜 ...
- 第一章 [分布式CMS]
第一次准备写一个完整的例子, 也是正在做的一个项目! 准备记录一下"心路历程".... 项目为分布式的CMS 前期架构分为,单点登录,结构系统,资源云,文档云 ,DB服务,工具服务 ...
- Kubernetes e2e test and test framework
前言 Kubernetes的成功少不了大量工程师的共同参与,而他们之间如何高效的协作,非常值得我们探究.最近研究和使用了他们的e2e测试和框架,还是挺有启发的. 怎样才是好的e2e测试? 不同的人写出 ...
- Java GUI学习心得
虽然GUI的应用已经不是特别广泛了,但是如果了解一点,可以做些自己想要的工具,最近做了一个工具(是什么就不提了),当然碰到很多的问题,都意义解决了,现在分享出来. 1.关于窗体面板的显示问题 可能会遇 ...
- postman 第4节 切换环境和设置读取变量(转)
postman提供了environment管理功能,想要在多个环境中测试,比如在测试环境.灰度环境.生产环境等,只需要用同样的接口,切换下环境即可,非常方便.具体步骤: 切换环境 1.点击界面右上角的 ...
- Git学习总结（一）
.常用Git命令清单 一.新建代码库 #在当前目录创建一个Git代码库 $ git init #新建一个目录,将其初始化为Git代码库 $ git init [project name] #下载一个项 ...
- UI设计基础知识和JavaScript
[PS基础案例] 人物修图.调整画布大小,建立3个图层,并列放到画布中,用修补工具修掉中间的人物,再用橡皮章盖掉边缘的人物,然后扣出人物,放上新的蓝天,用橡皮擦调整透明度,擦掉水天交接的地方,然后调整 ...
- 【转载】js常用方法和片段
在网上看了不少js方法的总结没,自己也尝试总结过,这篇只迄今为止觉得最清楚的,尤其是call和apply的方法总结,很到位!! 1.javascript删除元素节点 IE中有这样一个方法:remove ...