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>
转载于:https://www.cnblogs.com/yangw/p/4482234.html
01_ExtJS_HelloWorld相关推荐
最新文章
- 小马儿随笔——实地参观A级数据中心
- springboot整合kafka和netty服务简单实例
- 全国计算机等级考试题库二级C操作题100套(第21套)
- repr方法字符串输出实例对象的值
- python自带的编辑器怎么换行_Python3基础 print 自带换行功能
- BCM_I2C函数更改
- mobileconfigs.php,iOS APP .mobileconfig的生成
- pycharm新建python的快捷键_Python基础之PyCharm 的初始设置
- MyEclipse的快捷使用(含关联源码和Doc的方式)
- (转)Spring4.2.5+Hibernate4.3.11组合开发
- No plugin found for prefix ‘doclint‘ in the current project
- android 移动网络定位服务器地址,安卓定位方式全总结-gps定位,network定位,ip定位,基站定位...
- 计算垂直平面与三维线段交点
- 如何把播放器转换成HTML5,Chrome把普通flash播放器转变成HTML5播放器插件:HTML5ify...
- ELF、BIN、HEX、AXF的区别,资料整理
- 绘制抽样函数Sa(x)matlab代码
- 速卖通奇门+聚石塔流程
- 浅谈使用KMeans进行性别与年龄的聚类分析
- AD硬件电路模块设计——PS7219及单片机的SPI接口电路
- 学会这五个邮件办公技巧,邮件秒变“私人秘书”【公司邮箱如何申请】
热门文章
- 强类型数据集DataSet入门1
- MAC . IntelliJ IDEA maven库下载依赖包速度慢的问题
- npm notice created a lockfile as package-lock.json. You should commit this file.
- CSS:实现文本超出显示省略效果(可指定几行显示)
- 前端—每天5道面试题(十二)
- JavaScript学习(七十五)—图解浅拷贝和深拷贝
- mysql可视化工具路径访问_windows开启3306端口并用可视化工具访问远程mysql(授权访问)...
- 货车交强险在网上能买吗?
- 大数据与Hadoop的区别
- 方舟编译器需要安装吗,还是系统升级后自带的?