Question

我想创建有3列的Grid。一列是'textfield'，另外两列是我将编辑器设置为'filefield'的图像。在图像列上，我可以使用渲染器显示图像，但是当编辑或添加新图像时，我无法按浏览按钮浏览图像。这是我的代码。

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Author',
    store: Ext.data.StoreManager.lookup('authorStore'),
    renderTo: 'authorGrid',
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        editor: {
            xtype: 'textfield',
        }
    }, {
        header: 'Icon',
        dataIndex: 'iconImage',
        renderer: function(val) {
            return '<img src="' + val + '">';
        },
        editor: {
            xtype: 'filefield',
            allowBlank: false,
        }
    }, {
        header: 'Background',
        dataIndex: 'background',
        renderer: function(val) {
            return '<img src="' + val + '">';
        },
        editor: {
            xtype: 'filefield',
            allowBlank: false,
        }
    }],
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 2
        })
    ],
    tbar: [{
        iconCls: 'icon-add',
        text: 'Add',
        handler: function() {
            // add record
        }
    }, {
        iconCls: 'icon-delete',
        text: 'Remove',
        handler: function() {
            // remove selected records...
        }
    }, {
        iconCls: 'icon-save',
        text: 'Save',
        handler: function() {
            store.save();
        }
    }]
});

这有什么不对？我可以把'filefield'编辑器这样吗？是否可以单击网格上的保存按钮以保存网格数据并上传图像？

Answer 1

经过快速调查后，我没有意识到这个问题的任何简单解决方案。在我看来，EditorGrid不应该支持这种类型的操作。而且 - 网格中的编辑器旨在修改商店相应行中的值。使用fileupload可以处理文件，但正如我在代码中看到的那样，您正在等待这些单元格中的字符串数据。

我建议用弹出窗口替换单元格中的fileupload。当用户单击一个单元格时，您将打开带有fileupload的弹出窗口。当他们选择一个文件并上传它时 - 你关闭弹出并重新加载网格商店中的记录。只是一个想法！

ExtJS4 - 如何在Grid中添加文件上传编辑器？

1 个答案: