什么是Ext JS
走進Ext的世界
Ext JS是一款富客戶端開發框架它基於javascript、HTML和CSS開發而成，無需安裝任何插件即可在常用瀏覽器中創建出絢麗的頁面效果。
個人總結Ext JS的方法
- 從Extjs的視圖學起
例如：窗體、表單、數等等。並且可以掌握調試工具和技巧
- 學習使用API
學會怎么查詢以及使用大牛提供的接口解決常見的問題（一般我們用到的效果，大牛們在做框架的時候都想到過）
- 把Extjs的前端可視化的組件與后台連接，進行交互
我們在做各類系統的時候都要跟數據庫打交道，在這個階段主要把各個組件與數據庫的交互寫清楚
- 掌握理論知識--原理性東西
如：Extjs的繼承機制，事件等等
- 官方提供的開發實例
如官方提供的樣例掌握
Extjs核心工具方法
一、Extjs核心工具方法
1、Ext.onReady
Ext.onReady在DOM模型加載完畢后才進行操作。
優點：無需像onload事件那樣，等待頁面的所有資源都加載完畢后才進行操作。
"onReady方法是Ext.Loader.onReady()方法的別名"
其語法如下：
Ext.onReady(Object fn,Objet scope,Objet options)
其中：
fn:指定Ext JS和HTML頁面加載完成后要執行的方法，fn參數類型為對象（必傳參數）；
scope:指定執行該方法的范圍（可選參數）；
options：指定執行一些附加選項，比如delay等（可選參數）。
2、Ext.create
Ext.create方法是創建對象的方法，
"在Ext JS 4版本之前，一直使用new關鍵字創建對象-- new classname([config])"
其語法如下：
Ext.create( String className, Object args)
其中：className指定要創建對象的類名，可以是類的全名、別名或者備用名；
args是一個JavaScript對象，用於向新生成的對象傳入構造參數值（也稱為配置選項，即為config屬性指定選項傳入參數值）,類型為對象。
二、Ext JS 4 語法
1、配置對象
config:用於為該類指定配置選項，Ext JS會自動為config指定的選項添加setter和getter方法。
2、關於xtype
定義xtype來指定該位置使用什么組件。
定義xtype，一般使用組件的別名。
3、使用Ext.widget或者Ext.createWidget創建對象
Ext.widget的作用是使用別名來創建對象。 Ext.widget =Ext.createWidget;
其語法如下：
Ext.widget( classname,[config] )
其中： classname是對象的別名；
configs是可選參數，為對象的配置對象（config options）,類型為對象。
4、使用Ext.ns或者Ext.namespace定義命名空間
Ext.namespace()方法用於創建一個或多個命名空間，命名空間可用於限定函數、類的范圍和作用域，可以 很好的解決二者的同名沖突。
很多時候都會使用命名空間來組織相關類和其他類。在Extjs中，使用Ext.namespace方法可創建命名空間
其語法如下：
Ext.namespae(namespace1,namespae2,...)
其中namespace1、namespace2都是字符串數據，是命名空間的名字
5、使用Ext.define定義新類
Ext.define()方法和Ext.extend()方法都用於自定義類。
"Ext.define()方法相當於Ext.ClassManager.create()方法的別名"
"在Ext JS 3版本，定義新類使用的是Ext.extend方法（不推薦使用）"
其語法如下：
Ext.define( String className, Object properties,[Function callback] );
其中：className:用於執行自定義的類名（推薦采用與java類名相同的命名規則）；
properties：新類的配置對象，對象里包含了類的屬性集對象（用於為該類定義屬性、方法）。
callback：回調函數，當類創建完成后執行該函數（用於指定該類創建成功的回調函數）。
注意：properties該對象可以指定任何合法的屬性，以下是幾種具有特殊意義的屬性。
Ⅰ.self:引用當前類本身
Ⅱ.alias:為該類定義別名
Ⅲ.alternateClassName:為該類定義可選的類名
Ⅳ.config:用於為該類指定配置選項，Ext JS會自動為config指定的選項添加setter和getter方法
Ⅴ.extend:用於指定該類繼承的父類
（還可以通過constructor為該類指定構造器）
Ⅵ.inheritableStatics:與statics屬性相同，也用於為該類定義靜態方法和靜態屬性，該屬性的 定義的靜態方法和靜態屬性可以被子類繼承
Ⅶ.mixins:用於列出所有要被混入的類
Ⅷ.override：用於注定要覆蓋的類
Ⅸ.requires:用於列出在實例化該類之前，必須預先加載的類
Ⅹ.singleton:如果該屬性被設為true,則該類的實例將是單例的
ⅩⅠ.statics:為該類定義靜態方法和靜態屬性
ⅩⅡ.uses:用於列出必須與該類同時使用的類
6、使用Ext.defer方法指定延遲執行的函數
Ext.defer()用於指定延遲執行的函數
其語法如下：
Ext.defer(Function fn,Number millis,[Object scope],[Array args])
其中：
fn參數執行需要延遲執行的函數；
millis:指定延遲多少毫秒后執行fn函數；
scope參數用於指定執行fn函數的范圍；
args用於執行傳入fn函數的參數；
7、Ext.apply和Ext.applyIf方法
Ext.apply()及Ext.applyIf()方法都是用於把一個對象中的屬性復制到另一個對象中。
共同點：都用於實現屬性復制。
不同點：
Ext.apply()將會覆蓋目標對象中的屬性；
Ext.applyIf()只復制目標對象中沒有、而源對象中有的屬性不會發生屬性覆蓋。
其語法如下：
Ext.apply()方法的語法格式為：
Ext.apply(Object object, Object config,Object defaults)
作用：
把config、defaults兩個對象的屬性復制到objet中，但是當config、default兩個對象的屬性值發生沖 突時，config的屬性值取勝。
8、Ext.isXxx方法---用於判斷是否為某某對象
Ext.isXxx()方法代表系列的方法，它們都用於判斷是否為某某對象，isXxx()方法總是返回Boolean值。
9、Ext.each和Ext.iterate方法
Ext.each()方法用於遍歷數組，它是Ext.Array.each()方法的別名。
Ext.iterate()方法相當於Ext.Array.each()方法和Ext.Object.each()方法“綜合體”，
當被遍歷的數據是數組時，Ext.iterate()方法底層調用Ext.Array.each()方法進行遍歷；
當被迭代的數據是對象時，Ext.iterate()方法底層調用Ext.Object.each()方法進行遍歷；
三、Ext JS擴展的工具方法---更多方法參考：Ext JS API文檔
Ext JS擴展的所有工具方法都直接位於Ext命名空間下。
Ⅰ、為Array擴展的工具方法---Ext.Array工具類
JavaScript數組用做棧的兩個方法如下：
①.push(ele):元素入棧，返回入棧后數組的長度。
②.pop()：元素出棧，返回出棧的數組元素
JavaScript數組作為隊列使用的兩個方法如下：
①.unshift(ele):元素入隊列，返回入對列后數組的長度。
②.shift()：元素出隊列，返回出隊列的數組元素。
Ⅱ、為Date擴展的工具方法---Ext.Date工具類
Ext.Date為操作Date對象提供了大量的工具方法
例如：Ext.Date.format()、Ext.Date.between()兩個方法
Ⅲ、為Function擴展的工具方法---Ext.Function工具類
Ext.Function為JavaScript函數新增了大量工具方法
Ⅳ、為Number擴展的工具方法---4個工具類方法
Ext.Number為JavaScript的數值類型的值
Ext.Number.constrain()工具方法---Ext.Number.constrain(20，10，30) //20截取傲10~30范圍內
Ext.Number.from()工具方法---Ext.Number.from("abc","20") //字符串abc轉換為數值
Ext.Number.snap()工具方法---Ext.Number.snap(23,7,10,20) //返回離23最近的7的倍數(必須在10~30之間)
Ext.Number.snap()工具方法：作用--先獲取距離指定數值最近的、特殊數值的倍數，然后將得到的數值截取 到指定范圍之內。
Ext.Number.toFixed()工具方法---Ext.Number.toFixed(3.2545,1) //3.2545保留1位小數點
Ⅴ、為Object擴展的工具方法---Ext.Object工具類
javaScript的對象不僅僅可以作為對象使用，還可以作為Java Map集合使用，javascript對象的每個屬性名、屬性值就相當於Map的key-value對（鍵值對）
例如：Ext.Object.each()、Ext.Object.toQueryString()、Ext.Object.fromQueryString()、Ext.Object.getKeys()、Ext.Object.getValues()等等
Ⅵ、為String擴展的工具方法---Ext.String工具類
Ext.String提供了大量工具方法來操作字符串，這些工具方法可以進一步增強字符串的功能
Ext.String.format()方法比較實用，用於將字符串中的{0}、{1}、{2}....占位符替換成實際的值。
Ⅶ、Ext.JSON方法
JSON是一種非常有用的輕量級數據交換格式。
Ext.JSON類提供了3個工具方法來完成javascript對象與JSON字符串的相互轉化。
Ext.JSON.encode()工具方法---用於把javascript對象或數組轉換為JSON字符串
Ext.JSON.encode()方法的別名是： Ext.encode()可直接使用
Ext.JSON.decode()工具方法---用於把JSON字符串恢復成javascript數組或對象
Ext.JSON.decode()方法的別名是： Ext.decode()可直接使用
Ext.JSON.encodeDate()工具方法---用於編碼一個日期。將返回的實際字符串，插入到JSON字符串作為 文本表達式。返回的默認格式是："yyyy-mm-ddThh:mm:ss"
Ext.JSON.encodeValue()工具方法---用於把javascript對象或數組轉換為JSON字符串
Ext JS所有界面組件
1、使用Ext.container.Container--創建容器
2、使用Ext.panel.Panel--創建面板
3、使用Ext.toolbar.ToolBar--創建工具條
4、使用Ext.tab.Panel--創建Tab面板
5、使用Ext.container.Viewport--整體布局
6、使用Ext.window.Window--創建窗口
7、使用Ext.window.MessageBox--創建對話框
8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker實現特殊菜單項
9、使用Ext.Ation--創建按鈕
10、使用Ext.ProgressBar--創建進度條
11、使用Ext.slider.Single--創建滑動條
12、使用Ext.Img--創建圖片
13、使用Ext.Editor--創建編輯器
14、使用Ext.tip.ToolTip--創建提示
15、使用Ext.QuickTipManager和Ext.tip.QuickTip--創建提示
16、使用Ext.ux.GMapPanel實現Google地圖
17、使用Ext.form.field.ComboBox--創建復合框
18、使用Ext.data.Store與Ext.data.Model管理數據
19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader讀取數據
20、使用Ext.grid.Panel--生成表格
21、使用Ext.grid.column.Column-定義列
22、使用Ext.grid.Panel顯示遠程數據
23、使用Ext.tree.Panel生成數
------------------------------------------------------------------------------------------------
Ext JS所有界面組件都繼承了Ext.Component,
Ext.component的子類：Ext.container.Container則是其他組件的容器，用於盛裝其他組件。
一、使用Ext.Component
Ext.Component是最普通、沒用額外附加行為的組件，該組件原本是"一無所有"的區域----空白的區域。
樣例：
<script type="text/javascript">
//創建comp容器對象
var comp = Ext.create('Ext.Component', {
html: 'Hello world!',
width: 300, //寬度
height: 200, //高度
padding: 20, //內邊距
style: { //設置樣式
color: '#FFFFFF',
backgroundColor:'#000000'
},
renderTo:Ext.getBody() //指定將該組件追加到<body.../>元素中
});
copm.center(); //使用容器居中
</script>
二、使用Ext.container.Container創建容器 --- 可以盛裝其他組件
Ext.container.Container代表一個空白的容器，
使用場景：需要現將多個組件"組合"在一起，再將他們放在頁面上顯示出來。
樣例：
<script type="text/script">
// 顯式創建一個容器
Ext.create('Ext.container.Container', {
//指定布局方式
layout: {
type: 'hbox'
},
width: 400,
renderTo:Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
// 指定對該容器中所有添加項進行默認設置
defaults: {
labelWidth: 80,
// 隱式創建容器通過指定的xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
//指定該容器包含的組件
items: [
//第2個組件，xtype是datefield，表明是一個日期選擇器
{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'Start date' //開始日期
},{
xtype: 'datefield',
name: 'endDate',
fieldLabel: 'End date' //結束日期
}]
});
</script>
三、使用 Ext.panel.Panel --- 最常用的的容器類之一，Ext.window.Window和 Ext.tab.Panel、Ext.form.Panel。
Ext.panel.Panel繼承了Ext.container.Container
Ext.panel.Panel容器的功能更加豐富，它可以添加標題、工具條等等，更多參照API
樣例：
<script type="text/script">
Ext.onReady(funtion(){
// 創建Ext.panel.Panel容器對象
var con = Ext.create('Ext.panel.Panel', {
//指定布局方式
layout: {
align: 'center'
},
title:'查詢圖書'
height:280, //指定高度
width: 400, //指定寬度
renderTo:Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
// 指定對該容器中所有添加項進行默認設置
defaults: {
labelWidth: 80,
flex: 1,
style: {
padding: '10px'
}
},
//為該Panel設置工具按鈕
//無須指定xtype屬性，默認就是tools值，即工具按鈕
tools:[
{
//指定刷新工具按鈕
type:'refresh',
//工具提示
tooltip:'刷新頁面',
//單擊該工具按鈕的事件處理函數
handler:function(event,toolEl,panel)
{
alert("用戶刷新數據");
}
},
{
//指定保存工具按鈕
type:'save',
//工具提示
tooltip:'保存數據',
//單擊該工具按鈕的事件處理函數
handler:function(event,toolEl,panel)
{
alert("用戶保存數據");
}
}
],
//指定該容器包含的組件
items: [
//第1個組件，沒有指定xtype，默認是panel,表明嵌套了一個Panel
{
title:'出版社信息'
height: 120, //指定高度
fieldLabel: 'Start date' //開始日期
},{
xtype: 'datefield',
name: 'endDate',
fieldLabel: 'End date' //結束日期
}]
});
});
</script>
四、使用Ext.form.Panel--表單容器
Ext.form.Panel表單面板各組件介紹
1、Ext.form.FormPanel支持的主要表單組件
ExtJS表單組件 說明 Xtype類型
Ext.form.field.CheckBox 復選框 checkboxfield
Ext.form.CheckBoxGroup 復選框組 checkboxgroup
Ext.form.field.ComboBox 下拉列表框 combo
Ext.form.field.Date 日期選擇框 datefield
Ext.form.field.Display 文本顯示組件 displayfield
Ext.form.field.FieldContainer 字段容器 fieldcontainer
Ext.form.field.FieldSet 字段集 fieldset
Ext.form.field.Hidden 隱藏域 hiddenfield
Ext.form.field.HtmlEditer HTML文本編輯器 htmleditor
Ext.form.Label 標簽字段 label
Ext.form.field.Number 數字輸入框 numberfield
Ext.form.field.Radio 單選框 radio
Ext.form.RadioGroup 單選框組 radiogroup
Ext.form.field.Spinner 微調組件 spinnerfield
Ext.form.field.TextArea 多行文本框 textareafield
Ext.form.field.Text 單行文本框 textfield
Ext.form.field.Time 時間選擇框 timefield
Ext.form.field.Trigger 觸發器按鈕文本框 triggerfield
Ext.form.field.File 文本框上傳字段 filefield
2、Ext.form.Panel主要配置項目表
配置項 類型 說明
buttons Array 一個按鈕（Ext.button.Button）配置對象數組，按鈕將被添加到表單頁腳中
layout String 表單布局
minButtonWidth Number 表單按鈕的最小寬度，默認為75px
pollForChanges Boolean 是否循環檢查表單值的變化
pollInterval Number 循環檢查表單值的時間間隔，默認為500ms
items Mixed 一個子元素或子元素的數組
title String 表單標題
3、Ext.form.FormPanel常用方法表
方法名 說明
checkChange:void 強制檢查每個表單字段是否發生了變化
getForm():Ext.form.BasicForm 獲取表單面板對應的基本表單對象
load(Object options):void 加載表單內容
startPolling(Number interval):void 開始循環檢查表單值是否發生了變化
參數說明：
interval：循環檢查的時間，單位ms
stopPolling:void 停止startPolling啟動的內置任務
submit(Object options):void 提交表單內容
4、Ext.form.field.Base主要配置項目表
配置項 類型 說明
dirtyCls String 設置表單值被修改后的樣式
fieldCls String 設置表單字段的樣式，默認為“x-form-field”
focusCls String 設置表單字段獲得焦點時的樣式，默認為“x-form-focus”
id String 控件的唯一標識，默認系統自動生成一個唯一標識
inputId String 這個id將被應用於生成的input元素，默認情況下這個id自動生成，如果手工配置id則需保證這個id的唯一性
invalidText String 設置表單值無效且並沒有提供信息時的顯示文字
inputType String 字段類型，默認為text
name String 字段名，默認為undefined
readOnly Boolean 設置字段是否只讀，默認為false。
Mixin:Ext.form.field.Field
disabled Boolean true則禁用組件，默認為false。禁用狀態下的組件將不被提交
submitValue Boolean 設置表單字段非禁用狀態下是否提交表單值，默認為true
validateOnChange Boolean 設置是否在值發生變化時立刻校驗的有效性，默認為true
value Mixed 字段的初始化值
Mixing:Ext.form.Labelable
activeError String 如果設置該值，則組件第一次被渲染時該值將被作為錯誤信息展示，默認為undefined，組件創建之后可以使用setActiveError和unsetActiveError進行修改
activeErrorTpl Ext.XTemplate 錯誤信息模板
autoFitErrors Boolean 設置為true則自動調節組件體范圍，以便在組件范圍內顯示“side”或“under”狀態的錯誤信息，默認為true
fieldLabel String 設置字段標簽，它將與labelSeparator一起被添加，它的位置尺寸決定於labelAlign，labelWidth和labelPad配置項，默認為undefined
hideEmptyLabel Boolean 設置為true則完全隱藏內容為空的標簽
hideLabel Boolean 設置為true則完全隱藏表單標簽（fieldLabel和labelSeparator），默認為false
labelAlign String 設置表單標簽filedLabel的位置，
有效值：left：
標簽在字段左邊。top：
標簽在字段上面。
right：標簽在字段右邊。
labelPad Number 設置表單標簽與表單字段值之間的空白間距，默認為5px
labelSeparator String 設置表單標簽與表單字段之間的分隔符
labelStyle String 設置一個直接應用於標簽元素的樣式字符串，默認為undefined
labelWidth Number 設置表單標簽寬度，僅當labelAlign設置為“left”或“right”時生效，默認為100px
labelableRenderTpl Array/String/Ext.Template 表單標簽模板
msgTarget String 設置錯誤信息提示位置，
有效值包括：
qtip：顯示一個浮動的提示消息
title：顯示一個瀏覽器浮動提示消息
under：在字段下面顯示一個提示消息
side：在字段右邊顯示一個提示消息
none：不顯示提示消息
[element id]：直接將錯誤消息添加到指定元素的innerHTML屬性
preventMark Boolean true則不顯示錯誤消息，默認為false
歡迎交流，進入博客網站：www.wangsong520.com進行留言交流，並且里面有更多知識分享！