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

Question

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

Answer 1

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

演示：https://fiddle.sencha.com/#fiddle/8ej

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