文档章节

ExtJS Template XTemplate 学习笔记

learn_more
 learn_more
发布于 2015/05/01 16:06
字数 1062
阅读 64
收藏 0

    模板是通过JavaScript控制DOM的最好方式,在jQuery1.4之前没有使用模板,他使用字符串拼接DOM,所以在代码维护方面是很困难的!1.4之后才使用模板,所谓模板就是模板方法设计模式,通过一套固定不变的流程进行代码设计,在Ext中使用了两个类作为模板,分别是基类:Template和直接子类XTemplate;Ext主要使用的是XTemplate,因为功能强大。

   1、 Template

    通过其构造方法可以了解,就是简单的把HTML字符串参数数组进行拼接成一条HTML语句,这个时候所有的占位符还不需要处理,具体如下:

    var tpl = new Ext.Template('<div>','{value0}{value1}{value2}','</div>',{compiled:true,disableFormats:true});

  这样他就可以把div拼接接成一个HTML代码,然后使用,编译后apply方法进行占位符替换

    var html = tpl.applyTemplate({value0:'value0',value1:'value1',value2:'value2'})

    tpl.complile(); var html = tpl.compiled;

最后得到的结果是一样的,使用apply或applyTemplate方法的原理是使用正则表达式进行占位符替换,这样速度相当较慢;

使用compile则是对字符串进行拼接操作,速度相对较快。

    2、XTemplate

    他是Template的直接子类,其主要是重写了Template的apply方法和applyOut方法,其余方法全部继承自Template,所以二者相似度很大,但是XTemplate功能强大,基本上Ext是基于XTemplate定义的。

    XTemplate对象就是Template对象的基本数据显示再加上tpl标签实现其独有的高级功能(内部使用XTemplateCompiler对象就是一个高级编译器,可以将模板编译成可执行的脚本,用于输出的html中动态执行)组合在一起,当然这种采用tpl标签的操作就类似于JSP的书写方式,个人感觉代码相对比较混乱,但是他却做到了数据与显示达到分离的效果。

    

    3、主要方法

    1)append:将数据应用到模板,并追加到指定元素

    2)applyTemplate、apply:将数据应用到模板,并且返回生成的代码

    3)compile:编译模板

    4)from:从innerHTML创建模板

    5)insertAfter、insertBefore、inserFirst:指定位置出操作DOM元素

    6)overwrite:将数据应用到模板,并且覆盖元素内容

    7)set:设置模板内容

    4、自定义格式化函数

var tpl = new Ext.Template('<div><a href="{src}">{text:this.hightlight}</a><div>');
tpl.searchString = "降价";
tpl.highlight = function(v){
 var search = this.searchString;
 re = new RegExt(search,"g");
 replace = "<font color='red'>"+search+"</font>";
 return v.replace(re,replace);
}
var value = {src:"/1000",text:"汽车又降价了"};
console.log(tpl.applyTemplate(value));
结果为:
 <div><a href="/1000">汽车又<font color="red">降价<font>了</a></div>

    5、XTemplate tpl使用实例(转载自 http://www.cnblogs.com/lipan/archive/2011/12/12/2274740.html)

<h1>使用标签tpl和操作符for</h1>
    <div class="content" id="div1"></div>
<h1>在子模板的范围内访问父元素对象</h1>
    <div class="content" id="div2"></div>
<h1>数组元素索引和简单运算支持</h1>
    <div class="content" id="div3"></div>
<h1>自动渲染单根数组</h1>
    <div class="content" id="div4"></div>
<h1>条件逻辑判断</h1>
    <div class="content" id="div5"></div>
<h1>即时执行任意的代码</h1>
    <div class="content" id="div6"></div>
<h1>模板成员函数</h1>
    <div class="content" id="div7"></div>
var data = {
    name: '张三',
    job: 'C#程序员',
    company: '惠普',
    email: 'zhangsan@163.com',
    address: '武汉市洪山区光谷软件园',
    city: '武汉',
    state: '正常',
    zip: '430000',
    drinks: ['绿茶', '红酒', '咖啡'],
    friends: [{
        name: '李四',
        age: 6,
        like: '鲜花'
    }, {
        name: '王五',
        age: 26,
        like: '足球'
    }, {
        name: '赵六',
        age: 81,
        like: '游戏'
    }]
};
//使用标签tpl和操作符for
var tpl = new Ext.XTemplate(
      '<table cellpadding=0 cellspacing=0 border=1 width=400px>',
      '<tr><td colspan=2 align=center><b>{name}的个人资料</b></td></tr>',
      '<tr><td>姓名:</td><td>{name}</td></tr>',
      '<tr><td>工作:</td><td>{job}</td></tr>',
      '<tr><td>公司:</td><td>{company}</td></tr>',
      '<tr><td>地址:</td><td>{address}</td></tr>',
      '<tr><td>喜好饮品:</td><td>{drinks}</td></tr>',
      '<tr><td>他的好友:</td><td>',
      '<tpl for="friends">',
      '<p>{name}:{age}岁</p>',
      '</tpl></td></tr>',
      '</table>'
);
tpl.overwrite(Ext.get("div1"), data);


参考:

1)EXJS 权威指南

2)博客 http://www.cnblogs.com/lipan/archive/2011/12/12/2274740.html

© 著作权归作者所有

下一篇: Java 乱码
learn_more
粉丝 94
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
《Ext JS模板与组件基本知识框架图----模板》

最近在整理Ext JS的模板和组件,在参考《Ext JS权威指南》,《Ext JS Web应用程序开发指南》,《Ext JS API》等相关书籍后才写下这篇《Ext JS模板与组件基本知识思维导图》,由于篇幅较长,所...

yaohong
2016/12/16
0
0
模版引擎XTemplate与代码生成器XCoder(源码)

模版引擎XTemplate是一个仿T4设计的引擎,功能上基本与T4一致(模版语法上完全兼容T4,模版头指令部分兼容)。 自己设计模版引擎,就是为了代码生成器、网站模版、邮件模版等多种场合,也就是...

大石头
2010/12/21
0
0
Ext GWT 3.0 Developer Preview 1

Ext GWT是Ext和GWT整合的一个工具,可以使用GWT编写EXT为前台的程序 下载 Ext GWT 3.0 Developer Preview 1 从 3.0 开始自定义事件处理的写法简化了,如下: 或者 新的 XTemplate 模板功能:...

红薯
2011/06/17
954
1
Ext 如何通过XTemplate显示图片

Model层的图片字段是一个以逗号分隔的字符串,代表多张图片。(http://xxx.cc.1.png,http://xxx.cc.2.png,http://xxx.cc.3.png) 需要在视图层展示图片,使用rowBodyTpl : new Ext.XTemplat...

tony-cyq
2016/06/12
181
1
sencha touch2 list中自定义按钮的问题

请教大侠们,列表中的数据都是从store里面取出来的,右边的“确认”/"已确认"也是从store里面获取的,要在界面上渲染成button。已确认的话按钮还不能点击。 在list里面试了在itemTpl选项里面...

海岩奶绿
2013/02/19
990
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo服务暴露与注册

前面的文章中,我们讲解了Dubbo是如何进行配置的属性的初始化的,并且讲到,Dubbo最终会将所有的属性参数都封装为一个URL对象,从而以这个URL对象为基准传递参数。本文则主要讲解Dubbo是如何...

爱宝贝丶
22分钟前
0
0
Leetcode PHP题解--D88 696. Count Binary Substrings

D88 696. Count Binary Substrings 题目链接 696. Count Binary Substrings 题目分析 给定一个01字符串,返回仅用连续的0和1串所能组成的二进制字符串个数。 例如,00110011,就包含0011,0...

skys215
今天
2
0
基础工具类

package com.atguigu.util;import java.sql.Connection;import java.sql.SQLException;import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid......

architect刘源源
今天
52
0
P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
18
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部