一 前言
最近在整理Ext JS的模板和組件，在參考《Ext JS權威指南》,《Ext JS Web應用程序開發指南》，《Ext JS API》等相關書籍后才寫下這篇《Ext JS模板與組件基本知識思維導圖》，由於篇幅較長，所以必須肢解與各位分享。想要《Ext JS模板與組件基本知識思維導圖》原文檔的可以與我聯系。
組件是Ext JS的基礎，模板是Ext JS4的基礎，熟悉模板也就了解組件的組織方式，也就為使用組件和構建自定義組件打下基礎。
130個組件雖多，但最基本的就是四類：容器、面板、布局、視圖。而且在使用中容易混淆其作用，所以我們必須先從整體上掌握模板和組件，后續分化學習他們之間區別和各自作用。
二 模板概述
1. 什么是模板(HTML片段，占位符)
2. 為什么會用到模板（統一的渲染管道）
3. Ext JS中模板有哪些，怎么分的？(2種)
三 Ext.Template
1. Ext.Template主要配置項(disableFormats(中文意思))
2. Ext.Template主要方法(1.newExt.Template\2.append\3.apply\4.applyOut\5.applyTemplate\6.insertAfter\7.insertBefore\8.insertFirst\9.overwrite\10.set\11.addStatics\12.create( ) )
3. Ext.Template怎么使用
(1) Ext.Template.append方法及數組形式模板值
(2) Ext.Template.overwrite方法及JSON對象模板值
(3) 在模板中使用格式化函數
(4) 使用自定義的格式化函數解析多層json對象
四 格式化輸出數組(可先跳過此節 參考於ExtJS權威指南和ExtJS的API)
1. Ext.String.(10個)
(1) htmlEncode
(2) htmlDecode(解碼)
(3) urlAppend(hellow?a=1這個?)
(4) trim(n. 修剪；整齊)
(5) capitalize
(6) ellipsis(n. 省略；省略符號)
(7) escapeRegex(RegEx n. 正則表達式)
(8) toggle(n. 開關,觸發器Ext.String.toggle("aaa","abc","相等"))
(9) leftPad( Pad n.填補Ext.String.leftPad("12 3",5,"0000")-000012 3)
(10)format(Ext.String.format("我,生於{0}年“,1964)-我生於1964年)。
2. Ext.Number（5個）
(1) constrain(約束.constrain(21,10,20))
(2) snap(adj. 突然的)
(3) toFixed(.toFixed(3.1415926,5));//3.14159)
(4) from(值是數字則返回數字，否則返回默認值)
(5) randomInt(randomInt(1,100)))
3. Ext.Date
常用屬性：defaultFormat
常用方法：
(1) add(Ext.Date.add(new Date('12/15/2016'), Ext.Date.DAY, -5))
(2) between(console.log(Ext.Date.between(date, start, end)); //返回true)
(3) format (Ext.Date.format(date, 'Y年m月d日 H:i:s'); // 2016年12月20日 14:30:00 )
D (使用兩位數字顯示天數,前導字符為0) / j (不使用兩位數字顯示天數) / M (使用兩位數字顯示月份,前導字符為0) / n (不使用兩位數字顯示月份,不加前導字符0) / Y (使用4為數字顯示年份)
Y (使用兩位數字顯示年份) / G (使用24小時格式顯示小時,沒有前導字符0) / H (使用24小時格式顯示小時,有前導字符0) / i (顯示分鍾，有前導字符0) / S (顯示秒，有前導字符0)
(4) parse (n. 從語法上分析)var input = '2016年10月31日 14:30:00'; var format = 'Y年m月d日 H:i:s'; var date = Ext.Date.parse(input, format, true); console.log(date); //Mon Oct 31 2016 14:30:00 GMT+0800 (中國標准時間)
(5) getDayOfYear (var date = new Date('12/15/2016 14:30:00'); console.log(Ext.Date.getDayOfYear(date)); //返回 349 )
(6) getDaysInMonth 獲取該月所擁有天數
(7) getWeekOfYear(返回指定日期中其年份的周數)
(8) isLeapYear (返回指定日期中其年份的周數)
(9) getFirstDayOfMonth(返回指定日期中其月份第一天是星期幾，返回值為0到6中的數字，0便是星期日)
(10) getLastDayOfMonth (返回指定日期中其月份最后一天是星期幾，返回0到6中數字，0表示星期日)
(11) getFirstDateOfMonth (返回指定日期中返回月份第一天的日期值)
(12) getLastDateOfMonth(返回指定日期中返回月份最后一天的日期值)
(13) now (返回當前日期)
4. Ext.util.Format屬性(具體看思維導圖)
五 超級模板：Ext.XTemplate （重點來了）
1. 為何稱其為超級(1.自動填充數組數據2.執行判斷語句3.數學運算以及執行實例內的方法4.模板有values，parent，xindex和xcount等四個內建的模板變量，用於特殊處理5.還可根據需要進行自定義操作)
2. Ext.XTemplate方法(XTemplate對象重寫了Template對象的apply方法和applyOut方法，其余方法全部繼承自Template對象。)
3. Ext.XTemplate怎么用？
(1) 整個依舊和Template一樣寫在Ext.onReady(function(){...});中。
(2) 模板的定義現在是var abc(自定義名稱)=new Ext.XTemplate();下。
(3) 自動填充數組和作用域切換 //Xtemplate可進行自動數組填充，改善了Template的單一填充性，這里所用到的方法是<tpl for="">....</tpl>
(4) 使用基本的條件邏輯運算 //和數組遍歷一樣依舊在<tpl>標簽下進行，標簽tpl和操作符if，可用來執行條件判斷，以決定模板的哪一部分需要被渲染出來。
(5) 在子模板中訪問父對象 //在標簽中提取值的時候采用parent.父類變量
(6) 數組索引和簡單運算支持 //當處理數組時特殊符號{#}表當前數組索引加1，從1開始而不是0，元素可轉換成數字也支持基本+-*/運算
(7) 自動渲染簡單數組 //對於只包含簡單數組的可以使用{.}符號進行循環輸出。
(8) 在模板中執行任意代碼 // XTemplate模板中任何包含在{[...]}中間的代碼都在模板的作用域范圍內執行，它支持一些特殊變量
values //當前作用域下的值對象，通過切換子模板的作用域可以改變其中的值。
parent //父模板的值對象
xindex // 循環模板時的索引（從1開始）
xcount //模板循環時的總循環次數
(9) 使用模板成員函數
六. 模板的優勢（1.實現數據與數據表現的分離2.模板可以一次定義多次使用 3.將表現層相關的邏輯封裝在模板內部）
