一 前言
最近在整理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.将表现层相关的逻辑封装在模板内部）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
