Extjs-02-官⽅API⽂档使⽤官⽅API⽂档地址：
docs.sencha/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为例
jquery官方文档下载上边fn就是alert⽅法的回调函数，也就是alert⽅法执⾏完后再执⾏的函数，scope是回调函数执⾏的范围，以例⼦说明如下： 1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>ext js⼊门</title>
6<!-- 引⼊ext js 的样式⽂件-->
7<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css"/>
8<!-- 引⼊ext js的核⼼库-->
9<script src="ext/ext-all.js"></script>
10<script>
11// alert("js原⽣弹出框：hello");
12//需要Extjs框架初始化完成才能执⾏
13 Ready(function(){
14//使⽤ext 弹出框的回调函数
15 Ext.MessageBox.alert('Ext弹出框','hello world',function () {
16 console.log('ext js'); //在控制台打印内容
17 });
18 })
19</script>
20</head>
21<body>
22
23</body>
24</html>
执⾏过程：
常⽤组件panel的使⽤
这⾥使⽤new关键字来创建⼀个panel对象，格式为new Ext.panel.Panel({ 需要配置的参数列表 })，这⾥需要配置的参数，把⿏标放在configs上⾯就显⽰出来可选的配置参数了：
使⽤create⽅式创建对象：格式为： ate('类的名字,{属性配置 }) ，或者直接搜索Panel这个类下⾯的create⽅法，给出了create⽅法的使⽤说明：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>ext-panel使⽤</title>
6<!-- 引⼊ext js 的样式⽂件-->
7<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css"/>
8<!-- 引⼊ext js的核⼼库-->
9<script src="ext/ext-all.js"></script>
10<script>
11
12 Ready(function(){
13//不同于单例对象，panel对象需要⾃⼰创建，第⼀种⽅式：new对象
14var panel = new Ext.panel.Panel({
15 width:300,
16 height:150,
17 title:'⾯板标题',
18 html:'⾯板显⽰的内容',//指定显⽰的内容
19 renderTo: 'dd',//⾯板必须要进⾏渲染才进⾏显⽰，配置这个panel在哪⾥显⽰
20 })
21//使⽤create⽅法格式为： ate('类的名字,{属性配置 })
22 ate('Ext.panel.Panel',{
23 width:300,
24 height:150,
25 title:'⾯板2',
26 html:'⾯板2显⽰的内容',//指定显⽰的内容
27//renderTo: 'dd2',
28 Body()
29 })
30 })
31</script>
32</head>
33<body>
34<div id="dd"></div>
35</body>
36</html>
也可以使⽤ Body() 来获取body这个对象，让panel显⽰在html的body中，运⾏如下：
（获取到的直接是Ext的对象，在创建的时候就进⾏渲染不像jquery中获取到的是DOM元素，需要⽤$()转换为jquery对象）
第三种⽅式创建panel对象，格式为 ate({xtype:' ' ，对象属性 })
//通过别名获取panel对象ate({xtype:''，对象属性 })
var panel3 = ate({
xtype:'panel',
width:300,
height:150,
title:'⾯板3',
html:'⾯板3显⽰的内容',//指定显⽰的内容
})
（3）properties：属性
⽤来判断，查看，例如console.log(panel3.draggable); //打印⾯板的拖拽属性的值
（4）methods
当前组件拥有的⼀些⽅法，直接使⽤对象.⽅法名()就能调⽤了，如、panel3.close() ，关闭⾯板
（5）events 事件
例如：控制台打印 panel3.draggable的值后，关闭⾯板，当监听到关闭事件时，⼜开始执⾏关闭事件的回调函数，在控制台打印关闭在组件配置时使⽤listeners:{} 属性来设置事件监听：
1 //通过别名获取panel对象ate({xtype:''，对象属性 })
2 var panel
3 = ate({
3 xtype:'panel',
4 width:300,
5 height:150,
6 title:'⾯板3',
7 html:'⾯板3显⽰的内容',//指定显⽰的内容
8 listeners:{
9 close:function(){
10 console.log("关闭...")
11 }
12 }
13 })
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论