zoukankan      html  css  js  c++  java
  • Ext.template的使用

    JS的Ext库中用到现在唯一感到用的很爽的就是template,实在是ajax数据前台显示的利器,jQuery没有类似该对象实在是遗憾,虽然有第三方实现,但表现不如人意,还要引入大小不菲的js文件。
    首先要提下Xtemplate,它其实比template更高级,更强大,可以实现部分逻辑,包括循环、判断等。但是用到它则必须引入ext-all.js,500kb的庞然大物,我一般只会用ext-core.js,为了一个对象引入500kb的文件,以现在中土网络条件来看是非常不可取的。包括用ext来显示ui组件,也并不可取。其实大部分的功能在用template就能解决,无需Xtemplate出马。
    template模板的基本格式

    {name[:][format][(params)]}

    其中name为传入对象的属性名称,format为调用的格式函数及参数(可选)。
    格式函数有:

    ellipsis(length) – 对大于指定长度部分的字符串,进行裁剪,增加省略号(“…”)的显示。适用于只显示前N位的字符,然后提供详细页面的场合。
    undef -检查一个值是否为underfined,如果是的转换为空值
    htmlEncode – 转换(&, <, >, and ‘) 字符
    trim – 对一段文本的前后多余的空格裁剪
    substr(start, length) – 返回一个从指定位置开始的指定长度的子字符串。
    lowercase – 返回一个字符串,该字符串中的字母被转换为小写字母。
    uppercase – 返回一个字符串,该字符串中的字母被转换为大写字母。
    capitalize – 返回一个字符串,该字符串中的第一个字母转化为大写字母,剩余的为小写。
    usMoney – 格式化数字到美元货币。如:$10.97
    date[(format)] – 将一个日期解析成为一个特定格式模式的日期。如日期字符串不输入,默认为“月/日/年”
    stripTags – 剥去变量的所有HTML标签

    格式函数也可以根据实际应用调用自己实现的函数,调用方式{name:this.your_function_name[params]}
    比如:

    var testCustomTpl = new Ext.Template(‘<div>User: {username} IsRevoked:{revoked:this.yesNoFormat}</div>’);
    testCustomTpl.yesNoFormat = function(value) {
     return value ? ‘Yes’ : ‘No’;
    };

    接下去就是一段实际项目使用的代码测试段:

    function addTemp(){
    var tpl = new Ext.Template(
    ‘<li><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>’,
    ‘<tr><td width=”30″><img src=”img/icon_0{idx}.gif”/></td>’,
    ‘<td width=”auto”><a href=”#”>{content}</a></td>’,
    ‘<td width=”45″><div>{hot}</div></td>’,
    ‘<td width=”50″><input type=”button” onclick=”initSendPan({id})” value=”转发”/></td>’,
    ‘<td width=”50″><input type=”button” onclick=”keepSmsContent({id})” value=”收藏”/></td></tr>’,
    ‘</table></li>’
    );
    tpl.compile();
    var data = [{"id":"1","content":"test","hot":"10"},{"id":"2","content":"hello world","hot":"100"}]

    for(var i in data){
      if(typeof(data[i])== “object”){
         data[i]["idx"] = parseInt(i)+parseInt(1);
         tpl.append(’sms_list’,data[i])
       }
    }
    }

    这段代码模拟了ajax方式从后台取得数据后通过组织显示在页面。实际项目data为后台取得数据。
    没有Xtemplate中的循环标记,我们通过for方法来代替数据组织。
    没有Xtemplate中的{#}标记当前序列数,我们可以通过for循环中计数临时存放入json对象中idx属性。
    由于Ext的封装,for循环中会有function对象的进入,所以要对对象进行判断,data[i])== “object”。
    其他的业务逻辑可以在for循环中实现,一样能够达到使用Xtemplate的效果

  • 相关阅读:
    图形用户界面
    集合
    201671010136 泛型类总结
    异常、断言与日志
    [置顶]201671010131《面向对象程序设计课程学习进度条》
    [置顶]201671010131《面向对象程序设计课程学习进度条》
    201671010131《面向对象程序设计课程学习进度条》
    201671010131《面向对象程序设计课程学习进度条》
    201671010131《面向对象程序设计课程学习进度条》
    201671010131《面向对象程序设计课程学习进度条》
  • 原文地址:https://www.cnblogs.com/hannover/p/1951865.html
Copyright © 2011-2022 走看看