多年来在整理Ext JS的沙盘和零部件,在参考《Ext JS权威指南》,《Ext JS
Web应用程序开发指南》,《Ext JS API》等相关书籍后才写下那篇《Ext
JS模板与组件基本知识思维导图》,由于篇幅较长,所以必须肢解与诸位分享。想要《Ext
JS模板与组件基本知识思维导图》原文书档案的能够与自己联系。

      组件是Ext JS的底子,模板是Ext
JS4的基本功,熟稔模板也就询问组件的团组织措施,也就为利用组件和营造自定义组件打下基础。

1二十六个零部件虽多,但最大旨的正是四类:容器、面板、布局、视图。而且在行使中不难混淆视听其服从,所以大家不能够不先从完整上控制模板和零部件,后续区别学习他们之间不同和分级作用。

模板
图片 1

一.**模板概述**{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/二〇一五’),
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 =
‘二〇一五年7月30日 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
2015 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 (重临钦赐日期中回到月份第1天的日期值)
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.将显示层相关的逻辑封装在模板内部)
图片 2

 

相关文章

网站地图xml地图