Ext.Template apply和append两个方法的使用笔记

     Ext.Template同Ext.extend一样在EXTJS中有着举足轻重地地位。EXTJS中引入了模板机制了,当要对模板进行操作经常性的要用到Ext.Template和它的子"类"Ext.XTemplate中的方法。

 example one: append(el, values, returnElement)

    各个参数的意义 @el 内容元素 @values 模板值。 如果你的参数是数值(例如 {0} )可以是一个数组， 或者是一个对象(例如 {foo: 'bar' } )  @returnElement (可选)true将会返回一个Ext.Element (默认为undefined)  

<script type="text/javascript">
        Ext.onReady(function () {
            var htmlTpl = new Ext.Template('<a id="{id}" href="{url}" class="nav">{text}</a>');
            htmlTpl.compile();

           var returnEl=htmlTpl.append('blog-roll', {
                id: 'link1',
                url: 'http://www.jackslocum.com/',
                text: "Jack's Site"
            },true);
      });
    
    </script>

图(1)

example two: apply(values)或者applyTemplate(values) 二者是等同的

Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;

   参数的意义 @values  模板值。 如果你的参数是数值(例如 {0} )可以是一个数组， 或者是一个对象(例如 {foo: 'bar'} )

<script type="text/javascript">
        Ext.onReady(function () {
            var htmlTpl = new Ext.Template('<a id="{id}" href="{url}" class="nav">{text}</a>');
            htmlTpl.compile();

            var returnEl = htmlTpl.apply({
                id: 'link1',
                url: 'http://www.jackslocum.com/',
                text: "Jack's Site"
            }, true);

       });
  </script>

图(2)