EXTJS Modern Toolkit中TemplateColumn搭配Ext.XTemplate无法正常渲染的问题排查

我完全懂你碰到的这个糟心问题——明明语法和Classic Toolkit里看起来一模一样，可Modern下的TemplateColumn却把HTML代码原封不动当成文本显示，样式根本没生效。别慌，咱们一步步把它搞定：

问题根源 #

你代码里的模板字符串用了HTML实体转义（比如用<代替<，"代替"），这会让XTemplate把这些内容当成纯文本处理，而不是解析成HTML标签。虽说Classic Toolkit可能在某些场景下自动兼容了这种转义写法，但Modern Toolkit对模板解析更严格，直接输出了你写的转义字符。

另外提一句：Modern Toolkit的TemplateColumn其实不需要手动实例化Ext.XTemplate（当然实例化也没问题，但直接传字符串更简洁）。

修复后的代码 #

先把模板部分修改成未转义的原始HTML标签，这是核心：

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',
            // 直接使用未转义的HTML模板字符串，无需手动创建XTemplate实例
            tpl: '<div class="myClass">{name}</div>',
            // 如果一定要用XTemplate实例，也可以这样写：
            // tpl: new Ext.XTemplate('<div class="myClass">{name}</div>')
        },
    ],
});

对应的CSS可以保持不变，如果担心样式优先级不够，也可以微调选择器确保命中元素：

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

额外说明 #

• Modern Toolkit的XTemplate默认开启autoEscape: true，这会自动转义模板变量（比如{name}）里的HTML内容，防止XSS攻击，但模板里的静态HTML标签不会被转义，所以直接写<div>这类标签就能正常渲染。
• 如果你的变量内容本身包含需要渲染的HTML，可以用{name:htmlEncode}手动控制转义，或者创建XTemplate时设置autoEscape: false（但要注意XSS风险）。

这样修改后，你的TemplateColumn就能正常渲染带样式的内容啦！

内容的提问来源于stack exchange，提问作者Sap1234