官方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是回調函數執行的范圍，以例子說明如下：
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 Ext.onReady(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方式創建對象：格式為： Ext.create('類的名字,{屬性配置 }) ，或者直接搜索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 Ext.onReady(function(){ 13 //不同於單例對象，panel對象需要自己創建，第一種方式：new對象 14 var panel = new Ext.panel.Panel({ 15 width:300, 16 height:150, 17 title:'面板標題', 18 html:'面板顯示的內容',//指定顯示的內容 19 renderTo: 'dd',//面板必須要進行渲染才進行顯示,配置這個panel在哪里顯示 20 }) 21 //使用create方法 格式為： Ext.create('類的名字,{屬性配置 }) 22 Ext.create('Ext.panel.Panel',{ 23 width:300, 24 height:150, 25 title:'面板2', 26 html:'面板2顯示的內容',//指定顯示的內容 27 //renderTo: 'dd2', 28 renderTo:Ext.getBody() 29 }) 30 }) 31 </script> 32 </head> 33 <body> 34 <div id="dd"></div> 35 </body> 36 </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:{} 屬性來設置事件監聽：
1 //通過別名獲取panel對象Ext.create({xtype:'',對象屬性 }) 2 var panel3 = Ext.create({ 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 }) 14 panel3.render(Ext.getBody()) //在指定時刻渲染 15 console.log(panel3.draggable); // 16 panel3.close()
使用on方法監聽組件的事件：對象.on('事件名稱',function () { 回調函數要執行的業務 }
1 var panel3 = Ext.create({ 2 xtype:'panel', 3 width:300, 4 height:150, 5 title:'面板3', 6 html:'面板3顯示的內容',//指定顯示的內容 7 listeners:{ 8 close:function(){ 9 console.log("關閉...") 10 } 11 } 12 }) 13 panel3.on('close',function () { 14 console.log("使用on監聽事件...") 15 }) 16 panel3.render(Ext.getBody()) //在指定時刻渲染 17 console.log(panel3.draggable); // 18 panel3.close()
使用addListener() 方法來監聽事件： 對象.addListener('事件名稱',function () { 事件的回調函數執行的業務 } )
1 var panel3 = Ext.create({ 2 xtype:'panel', 3 width:300, 4 height:150, 5 title:'面板3', 6 html:'面板3顯示的內容',//指定顯示的內容 7 listeners:{ 8 close:function(){ 9 console.log("關閉...") 10 } 11 } 12 }) 13 panel3.on('close',function () { 14 console.log("使用on監聽事件...") 15 }) 16 panel3.addListener('close',function () { 17 console.log("使用addListener方法監聽事件...") 18 }) 19 panel3.render(Ext.getBody()) //在指定時刻渲染 20 console.log(panel3.draggable); // 21 panel3.close()
運行結果如下：
從上面可以看出，事件是可以疊加的