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

时间:2014-08-04 16:16:57

标签: extjs extjs4 sencha-architect

我想知道我们是否可以在网格面板中包含HTML编辑器列。我的要求是拥有一个类型为' HTML编辑器'的可编辑网格列。这样在编辑单元格内容时就可以使用样式。

1 个答案:

答案 0 :(得分:0)

你可以在编辑器中拥有任何你想要的东西。确保控制用户发布/创建的内容,或者如果您在这些编辑器单元中加载任何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()
});