ExtJS 模板类型 Ext.Template/Ext.XTemplate

Posted 2023-03-29 重庆熊猫

更新记录

更新记录

2023年3月6日 将模板内容单独抽出作为单独的章节。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处：https://www.cnblogs.com/cqpanda/p/17186001.html

Ext.Template类型

说明

Ext.Template 类可以用来创建HTML模板，填充数据后可以显示不同的数据。

创建模板

使用Ext.Template类型即可。第一个参数是模板字符串，配置项有2个。

compiled : Boolean
True to immediately compile the template. Defaults to false.

disableFormats : Boolean
True to disable format functions in the template. If the template doesn\'t contain format functions, setting disableFormats to true will reduce apply time. Defaults to false.

使用位置参数

var tpl = Ext.create(\'Ext.Template\', \'<div>Hello 0</div>\');

使用键值对

var tpl = Ext.create(\'Ext.Template\', \'<div>Hello name, DateTime dateTime</div>\');

本质是使用Ext.core.DomHelper类型。

var itemTpl = Ext.core.DomHelper.createTemplate(
    tag: \'li\',
    html: \'newfeature\'
);

带上配置项

let tpl = Ext.create(\'Ext.Template\',
                        \'<div>Hello name, DateTime dateTime</div>\',
                          compiled :true 
                    );

let data = 
    name: \'Panda\',
    dateTime: \'long long ago\'


let result = tpl.apply(data);

console.log(result);

编译模板

编译模板可以加快渲染
和填充速度

tpl.compile();

模板填充数据并渲染

按位置填充数据

var tpl = Ext.create(\'Ext.Template\', \'<div>Hello 0</div>\');
var data =  [\'panda\'];
tpl.append(Ext.getBody(),data);

按键值对填充数据

var tpl = Ext.create(\'Ext.Template\', \'<div>Hello name,\'+
\'DateTime dateTime</div>\');
tpl.compile();
var data = 
    \'name\':\'panda\',
    \'dateTime\':\'2020年10月2日\'
;
tpl.append(Ext.getBody(), data);

在组件中使用模板

使用tpl配置项

//创建组件
var pandaCmp = Ext.create("Ext.Component",
    width: 300,
    height: 150,
    data: 
        name:"Panda",
        code:"666"
    ,
    //定义模板
    tpl:["<h1>Panda666</h1><p>Hello name code!</p>"]
);

//渲染组件
pandaCmp.render(Ext.getBody());

本文来自博客园，作者：重庆熊猫，转载请注明原文链接：https://www.cnblogs.com/cqpanda/p/17186001.html