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

更新记录

更新记录

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());