为什么templatecolumn在现代工具包EXTJS中不起作用

Question

我试图在EXTJS现代工具包中使用templatecolumn。我不明白为什么Ext.XTemplate在现代工具包中不起作用，因为它的语法与经典工具包的语法没有什么不同。

码

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;
}

对于经典工具包，它表现得很好：

​

​

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

​

​

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>'),
    }, ],
});