Ext js-02 -官方API文档使用
官方API文档地址：
http://docs.sencha.com/extjs/6.5.3/classic/Ext.html
打开网页如下：
1.选择所使用的Ext js版本，后面offline docs是离线文档的下载
2.搜索功能：查找类，组件等
需要注意这个API下面modern是手机端对应的组件，classic对用的是电脑端的组件的介绍
例子：搜索messagebox,选择第二个Ext.window.MessageBox，打开如下：
3.看懂API对组件的介绍：如单例对象，组件类，xtype，config配置，properties配置，methods方法，events事件，继承体系等
（1）单例对象与组件类：
点击左侧的Ext ,在显示的界面上会看到一个SINGLETON的标识，表示这是一个单例对象（注意，单例对象前面显示的是红色的图标），在整个应用当中，只有一个Ext对象，
下边configs,properties，methods是这个单例对象具有的一些属性，方法等
搜索messagebox时，会出现Ext.window.MessageBox，和Ext.MessageBox，后者是一个单例对象，如上图，而Ext.window.MessageBox是一个组件（每一个组件都是一个类），Ext.window.MessageBox 指明了 Ext.MessageBox这个对象所属的类是哪一个类，xtype 相当于一个别名，方便使用。
（2）configs 的使用，先关注一下类搜索和成员搜索的区别，是不同的搜索框
以Ext.MessageBox为例
上边fn就是alert方法的回调函数，也就是alert方法执行完后再执行的函数，scope是回调函数执行的范围，以例子说明如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ext js入门</title>
<!-- 引入ext js 的样式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css" />
<!-- 引入ext js的核心库-->
<script src="ext/ext-all.js"></script>
<script>
// alert("js原生弹出框 ：hello");
//需要Extjs框架初始化完成才能执行
Ext.onReady(function(){
//使用ext 弹出框的回调函数
Ext.MessageBox.alert('Ext弹出框','hello world',function () {
console.log('ext js'); //在控制台打印内容
});
})
</script>
</head>
<body> </body>
</html>
执行过程：
常用组件panel的使用
这里使用new关键字来创建一个panel对象，格式为 new Ext.panel.Panel({ 需要配置的参数列表 })，这里需要配置的参数，把鼠标放在configs上面就显示出来可选的配置参数了：
使用create方式创建对象：格式为： Ext.create('类的名字,{属性配置 }) ，或者直接搜索Panel这个类下面的create方法，给出了create方法的使用说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ext-panel使用</title>
<!-- 引入ext js 的样式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css" />
<!-- 引入ext js的核心库-->
<script src="ext/ext-all.js"></script>
<script> Ext.onReady(function(){
//不同于单例对象，panel对象需要自己创建，第一种方式：new对象
var panel = new Ext.panel.Panel({
width:300,
height:150,
title:'面板标题',
html:'面板显示的内容',//指定显示的内容
renderTo: 'dd',//面板必须要进行渲染才进行显示,配置这个panel在哪里显示
})
//使用create方法 格式为： Ext.create('类的名字,{属性配置 })
Ext.create('Ext.panel.Panel',{
width:300,
height:150,
title:'面板2',
html:'面板2显示的内容',//指定显示的内容
//renderTo: 'dd2',
renderTo:Ext.getBody()
})
})
</script>
</head>
<body>
<div id="dd"></div>
</body>
</html>
也可以使用 Ext.getBody() 来获取body这个对象，让panel显示在html的body中 ， 运行如下：
（Ext.get获取到的直接是Ext的对象，在创建的时候就进行渲染 不像jquery中获取到的是DOM元素，需要用$()转换为jquery对象）
第三种方式创建panel对象，格式为 Ext.create({xtype:' ' ,对象属性 })
//通过别名获取panel对象Ext.create({xtype:'',对象属性 })
var panel3 = Ext.create({
xtype:'panel',
width:300,
height:150,
title:'面板3',
html:'面板3显示的内容',//指定显示的内容
})
panel3.render(Ext.getBody()) //在指定时刻渲染
（3）properties:属性
用来判断，查看，例如console.log(panel3.draggable); //打印面板的拖拽属性的值
（4）methods
当前组件拥有的一些方法，直接使用对象.方法名()就能调用了，如、panel3.close() ，关闭面板
（5）events 事件
例如：控制台打印 panel3.draggable的值后，关闭面板，当监听到关闭事件时，又开始执行关闭事件的回调函数，在控制台打印 关闭
在组件配置时 使用listeners:{} 属性来设置事件监听：
//通过别名获取panel对象Ext.create({xtype:'',对象属性 })
var panel3 = Ext.create({
xtype:'panel',
width:300,
height:150,
title:'面板3',
html:'面板3显示的内容',//指定显示的内容
listeners:{
9 close:function(){
10 console.log("关闭...")
11 }
12 }
})
panel3.render(Ext.getBody()) //在指定时刻渲染
console.log(panel3.draggable); //
panel3.close()
使用on方法监听组件的事件：对象.on('事件名称',function () { 回调函数要执行的业务 }
var panel3 = Ext.create({
xtype:'panel',
width:300,
height:150,
title:'面板3',
html:'面板3显示的内容',//指定显示的内容
listeners:{
close:function(){
console.log("关闭...")
}
}
})
panel3.on('close',function () {
console.log("使用on监听事件...")
})
panel3.render(Ext.getBody()) //在指定时刻渲染
console.log(panel3.draggable); //
panel3.close()
使用addListener() 方法来监听事件： 对象.addListener('事件名称',function () { 事件的回调函数执行的业务 } )
var panel3 = Ext.create({
xtype:'panel',
width:300,
height:150,
title:'面板3',
html:'面板3显示的内容',//指定显示的内容
listeners:{
close:function(){
console.log("关闭...")
}
}
})
panel3.on('close',function () {
console.log("使用on监听事件...")
})
panel3.addListener('close',function () {
17 console.log("使用addListener方法监听事件...")
18 })
panel3.render(Ext.getBody()) //在指定时刻渲染
console.log(panel3.draggable); //
panel3.close()
运行结果如下：
从上面可以看出，事件是可以叠加的
Ext js-02 -官方API文档使用的更多相关文章
- layer.js 弹窗组件API文档
基础参数 type title content skin area offset icon btn closeBtn shade shadeClose time id shift maxmin f ...
- 使用springfox+swagger2书写API文档（十八）
使用springfox+swagger2书写API文档 springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfo ...
- Core Java 学习笔记——1.术语/环境配置/Eclipse汉化字体快捷键/API文档
今天起开始学习Java,学习用书为Core Java.之前有过C的经验.准备把自己学习这一本书时的各种想法,不易理解的,重要的都记录下来.希望以后回顾起来能温故知新吧.也希望自己能够坚持把自己学习这本 ...
- 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图
最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...
- SpringBoot中使用springfox+swagger2书写API文档
随着前后端的分离,借口文档变的尤其重要,springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfox生成的API文 ...
- Android API文档
官方API文档: Android官网: https://developer.android.google.cn/index.html (不需要梯子) Android官网: https://develo ...
- 使用jsdoc-toolkit实现JS API文档自动化
在前面的博文中探讨自动化工程问题时,写过基于NodeJS的,使用gulp.grunt的jsdoc插件实现文档自动化.本文探讨基于java环境的自动化实现. 一.Java安装与环境配置 关于Java的安 ...
- 如何查看jsplumb.js的API文档(YUIdoc的基本使用)
目录 一.问题描述 二. 处理方法 三. YUIdoc工具介绍 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端> ...
- 使用jsdoc-toolkit来自动生成js api文档
近来前端组小盆友开发的类库越来越多,很多情况下彼此不知道写了些什么方法,为了更好的合作提高工作效率,找了个比较好的api文档生成方法.使用jsdoc-toolkit来自动生成js api文档. 一. ...
随机推荐
- 区间查询异或最大值——cf1100F,hdu6579（线性基）
hdu6579 题意初始时有n个数,现在有q次操作: 查询[l,r]内选择一些数使得异或和最大:在末尾加入一个数.题目强制在线. 思路对于i我们记录[1,i]每个基底最靠近i的位置和这个位置的值,然后 ...
- spring boot创建多模块聚合工程
环境:java1.8,idea 聚合工程优势: 1.统一maven操作.可以在一个maven工程管理多个子工程(每个子工程可单独打包,重启,调试.也可通过聚合工程一起管理). 2.统一管理依赖版本.可 ...
- 通过VLC的ActiveX进行二次开发，实现一个多媒体播放器 2011-04-10 00:57:23
http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=25498312&id=218294 通过VLC的ActiveX进行二 ...
- 精讲 org.w3c.dom(java dom)解析XML文档
org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...
- 1、Laravel 环境配置及安装
一.开发工具及环境 PHPStorm + phpStudy 最新版 Composer 安装 https://www.phpcomposer.com/ 下载就可以,设置中国镜像 安装完成后 compos ...
- JSP基础--三大指令
JSP指令 1 JSP指令概述 JSP指令的格式:<%@指令名 attr1=”” attr2=”” %>,一般都会把JSP指令放到JSP文件的最上方,但这不是必须的. JSP中 ...
- vsphere虚拟化之 DNS服务的创建(二)
1.创建域控的DNS服务器,打开"服务器管理器",由此可以看到AD域安装成功后,DNS服务也附带安装成功. 2.点击“工具”--“DNS” 3.点击“正向查询区域”--“best. ...
- CentOS安装Prolog和Erlang语言
安装Erlang比较简单 下载Erlang的压缩包 输入tar -zxvf 压缩包 解压 进入解压的目录下 输入./configure 在./configure执行完成后,输入make 然后输入mak ...
- 9、numpy——数组操作
Numpy 中包含了一些函数用于处理数组,大概可分为以下几类: (1)修改数组形状 (2)翻转数组 (3)修改数组维度 (4)连接数组 (5)分割数组 (6)数组元素的添加与删除 1.修改数组形状 函 ...
- 复制书稿 （dp+贪心）
[题目描述] 现在要把m本有顺序的书分给k个人复制(抄写),每一个人的抄写速度都一样,一本书不允许给两个(或以上)的人抄写,分给每一个人的书,必须是连续的,比如不能把第一.第三和第四本书给同一个人抄写 ...