How to display filefield in the grid cell in ExtJS

Question

I have created a grid on the form and I am displaying records dynamically, and I am using cell editor to edit the comments column and in another column using filefield to browse a file and displaying its full path in the attachment column. See the code that I am using:

                  {
                        xtype: 'container',
                        flex: 1,
                        layout: {
                            type: 'fit'
                        },
                        items: [
                            {
                                xtype: 'grid',
                                itemId: 'myAttachGrid',
                                reference: 'myAttachGrid ',
                                store: Ext.create('JSSample.store.attach.MyAttachGrid'),
                                multiSelect: true,
                                autoScroll: true,
                                columnWidth: 1,
                                editable: true,
                                columnLines: true,
                                plugins: [
                                    Ext.create('Ext.grid.plugin.CellEditing', {
                                        clicksToMoveEditor: 1,
                                        autoCancel: false
                                    })
                                ],
                                columns: [
                                    {
                                        header: 'File', dataIndex: 'Attachments', width: '40%'
                                    },                                        
                                    {
                                        header: '',
                                        dataIndex: '',
                                        width: '10%',
                                        hideable: true,
                                        editor: {
                                            xtype: 'filefield',
                                            labelWidth: 50,
                                            msgTarget: 'side',
                                            buttonOnly: true,
                                            anchor: '100%',                                                
                                            buttonText: '...',
                                            listeners: {
                                                change: function (fld, value) {
                                                    alert(value.replace(/C:\\fakepath\\/g, ''));
                                                }
                                            }
                                        }
                                    },                                      

                                    {
                                        header: 'Comments', dataIndex: 'Comments', width: '50%', editor: 'textfield'
                                    }
                                ]
                            }
                        ]
                    }

After loading the grid records are displaying dynamically like this:

Now, my problem is filefield is displaying after when we double click on the cell. [below is the screenshot]:

So, I want to visible the filefield with the records [without double click on the cell].

Please provide the ExtJS version used. In ExtJS 6, there's a [`widgetcolumn`](http://docs.sencha.com/extjs/6.0.1/classic/Ext.grid.column.Widget.html) available, which should do what you want. — Alexander, Dec 18 '16 at 12:20

score 0 · Answer 1 · answered Dec 19 '16 at 08:53

0

As @alexander mentioned in the comment, with ExtJS 6 you can use Ext.grid.column.Widget to add file field to your grid.

Check this fiddle for example.

answered Dec 19 '16 at 08:53

Sergey Novikov

4,096
7
33
59

Thanks for the help. but now we are getting new error when we clear the grid using store.removeAll() getting the following error: Uncaught TypeError: focusEl.isTabbable is not a function – TARUN KUMAR Dec 29 '16 at 14:23

How to display filefield in the grid cell in ExtJS

1 Answers1