为什么模板列在现代工具包 EXTJS 中不起作用

Question

我正在尝试在 EXTJS 现代工具包中使用模板列。我不明白为什么 Ext.XTemplate 在现代工具包中不起作用，因为语法与 classic 工具包的语法没有什么不同。

代码

var store = Ext.create('Ext.data.Store', {
    fields: ['name'],
    data: [{
        'name': 'Bart',
    }, {
        'name': 'Lisa',
    }, {
        'name': 'Homer',
    }, {
        'name': 'Marge',
    }]
});



Ext.create({
    xtype: 'grid',
    height: 500,
    renderTo: Ext.getBody(),
    store: store,
    columns: [
        {text: 'Name',  dataIndex:'name'},
        {
            text: 'Name Styled',
            xtype: 'templatecolumn',
            tpl: new Ext.XTemplate(
                '<div class="myClass">{name}</div>',
            ),
        },        
    ],
});

CSS

.myClass {
    font-size: 16px;
    color: red;
}

对于 classic 工具包，它呈现得很好：

但是，对于现代工具包，它显示完整的 html 文本，而不是应用 class:

Answer 1

只需在单元格配置中将 encodeHtml 设置为 false：

var store = Ext.create('Ext.data.Store', {
    fields: ['name'],
    data: [{
        'name': 'Bart',
    }, {
        'name': 'Lisa',
    }, {
        'name': 'Homer',
    }, {
        'name': 'Marge',
    }]
});

Ext.create({
    xtype: 'grid',
    height: 500,
    renderTo: Ext.getBody(),
    store: store,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Name Styled',
        // disable enocde in cell
        cell: {
            encodeHtml: false
        },
        // ----
        tpl: new Ext.XTemplate('<div class="myClass">{name}</div>'),
    }, ],
});

为什么模板列在现代工具包 EXTJS 中不起作用

Why doesn't templatecolumn work in modern toolkit EXTJS

extjs

grid