Question

I want to create Grid that has 3 columns. One column is ‘textfield’ and the other two columns are image which I set editor as ‘filefield’. On image column I can display image by using renderer but when it comes to edit or add new image I can’t press the browse button to browse image. Here is my code.

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

What does it wrong? Can I put ‘filefield’ editor like this? Is it possible to click save button on grid for save grid data and upload images?

Answer 1

After quick investigation I didn’t realized any easy solutions for this issue. In my view EditorGrid isn’t supposed to support such type of operations.
And moreover – editor in grid is intended to modify value in corresponding row of the store. With fileupload you operate with files, but as I see in you code you are waiting for a string data in these cells.

What I suggest is replace the fileupload in cells with a popup. When user clicks a cell, you will open popup with fileupload. When they select a file and upload it – you close the popup and reload record in grid’s store. Just an idea!