extjs中网格面板内的HTML编辑器

我想知道我们是否可以在网格面板中有一个HTML编辑器列。我的要求是有一个“HTML编辑器”类型的可编辑网格列，以便在编辑单元格内容时允许进行样式设置。

您可以在编辑器中拥有任何想要的内容。请确保控制用户发布/创建的内容，否则如果在这些编辑器单元格中加载任何HTML，您将面临安全漏洞

演示：

Ext.create（'Ext.data.Store'{
storeId:'SimpsonStore'，
字段：[“姓名”、“电子邮件”、“电话”]，
数据：{'items'：[
{“姓名”：“丽莎”，“电子邮件”：lisa@simpsons.com，“电话”：“555-111-1224”}，
{“姓名”：“Bart”，“电子邮件”：bart@simpsons.com，“电话”：“555--222-1234”}，
{“姓名”：“荷马”，“电子邮件”：home@simpsons.com，“电话”：“555-222-1244”}，
{“姓名”：“玛姬”，“电子邮件”：marge@simpsons.com，“电话”：“555-222-1254”}
]},
代理：{
键入：“内存”，
读者：{
键入：“json”，
root:'项目'
}
}
});
Ext.create（'Ext.grid.Panel'{
标题：《辛普森一家》，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[
{标题：'Name'，数据索引：'Name'，编辑器：'textfield'}，
{标题：“电子邮件”，数据索引：“电子邮件”，flex:1，
编辑:{
xtype:'textfield'，
allowBlank:false
}
},
{标题：'Phone'，数据索引：'Phone'}
],
selType:'cellmodel'，
插件：[
Ext.create（'Ext.grid.plugin.celleediting'{
单击编辑：1
})
],
身高：200，
宽度：400，
renderTo:Ext.getBody（）
});

谢谢。是否有一种方法可以将列的xtype更改为architect菜单中的组件之外的组件。当我尝试将列的xtype从'textfield'更改为'htmleditor'时，在architect配置的编辑器列表中找不到'htmleditor'选项。是的，architect只为您提供每种基本类型的基本编辑器。如果需要，您可以创建自己的自定义字段：

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"<b>lisa@simpsons.com</b>", "phone":"555-111-1224"},
        {"name":"Bart", "email":"<i>bart@simpsons.com</i>", "phone":"555--222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});