《Ext JS模板与组件基本知识框架图----模板》

最近在整理Ext JS的模板和组件,在参考《Ext JS权威指南》,《Ext JS Web应用程序开发指南》,《Ext JS API》等相关书籍后才写下这篇《Ext JS模板与组件基本知识思维导图》,由于篇幅较长,所以必须肢解与各位分享。想要《Ext JS模板与组件基本知识思维导图》原文档的可以与我联系。

      组件是Ext JS的基础,模板是Ext JS4的基础,熟悉模板也就了解组件的组织方式,也就为使用组件和构建自定义组件打下基础。

130个组件虽多,但最基本的就是四类:容器、面板、布局、视图。而且在使用中容易混淆其作用,所以我们必须先从整体上掌握模板和组件,后续分化学习他们之间区别和各自作用。

模板
《Ext JS模板与组件基本知识框架图----模板》

一.模板概述{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, 'YmdH:i:s'); //  2016122014: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 = '2016103114:30:00';  var format = 'YmdH: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(返回指定日期中其月份第一天是星期几,返回值为06中的数字,0便是星期日)

                         10.getLastDayOfMonth  (返回指定日期中其月份最后一天是星期几,返回06中数字,0表示星期日)  11.getFirstDateOfMonth (返回指定日期中返回月份第一天的日期值) 12.getLastDateOfMonth(返回指定日期中返回月份最后一天的日期值)

                         13.now   (返回当前日期)

      4.Ext.util.Format属性(具体看思维导图)

 四.超级模板:Ext.XTemplate  (重点来了)

      1.为何称其为超级(1.自动填充数组数据2.执行判断语句3.数学运算以及执行实例内的方法4.模板有valuesparentxindexxcount等四个内建的模板变量,用于特殊处理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.将表现层相关的逻辑封装在模板内部
《Ext JS模板与组件基本知识框架图----模板》

 

上一篇:Maven环境搭建和介绍


下一篇:Robot Framework之读取后缀名为.xls文件,并保存为list