ExtJS6 - 网格 tpl 显示 div class 作为文本

Question

我正在尝试 extJS 文档中 Ext.grid.Grid 的示例。我无法弄清楚为什么 tpl 也将 div 元素显示为文本。

Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'seniority', 'department'],
    groupField: 'department',
    data:[
        { firstname: "Michael", lastname: "Scott",   seniority: 7, department: "Management" },
        { firstname: "Dwight",  lastname: "Schrute", seniority: 2, department: "Sales" },
        { firstname: "Jim",     lastname: "Halpert", seniority: 3, department: "Sales" },
        { firstname: "Kevin",   lastname: "Malone",  seniority: 4, department: "Accounting" },
        { firstname: "Angela",  lastname: "Martin",  seniority: 5, department: "Accounting" }
    ]
});

Ext.create('Ext.grid.Grid', {
    title: 'Column Template Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [{
        text: 'Full Name',
        tpl: '{firstname} {lastname}'
    }, {
        xtype: 'templatecolumn',
        text: 'Department (Yrs)',
        tpl: '<div class="test">{department} {seniority}</div>'
    }],
    height: 200,
    width: 300,
    renderTo: Ext.getBody()
});

Output 我预计 <div class="test"> 应该不会出现。我在这里遗漏了什么吗？

Answer 1

在现代工具包中，单元格内容默认采用 html 编码。对于您的情况，您需要将单元格的 encodeHtml 配置设置为 false:

{
    xtype: 'templatecolumn',
    text: 'Department (Yrs)',
    tpl: '<div class="test">{department} {seniority}</div>',
    cell: {
        encodeHtml: false
    }
}

ExtJS6 - 网格 tpl 显示 div class 作为文本

ExtJS6 - Grid tpl showing div class as text

extjs

extjs-grid

extjs6-modern