ExtJS 4 Grid enabling cell data editing with button clicks

• Tweet

• Tweet

Hello,

I may sound a little vague in this post but it will all make sense at the end.

There are many a times when we want to use ExtJS’ powerful grid system with row or cell editing enabled. In this post I will show you how you can enable cell editing for specific cells in a row by click of a button. Actually button is not required as it is but the problem I fixed today has this requirement but you will get the idea.

The Problem

Allow specific cell to be edited when user clicks on a button called Edit and then click on top of the cell.

Let me create an example grid first.

The Grid Data

var gridData = {'names': [
                    {'name':'Jaspreet'},
                    {'name':'Chahal'},
                    {'name':'Yuvraaj'}
        ]
    };

The Grid Store

This is just an example store. In real life application you will have much complex stores

var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'name'}
        ],
        data: gridData,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root:'names'
            }
        }
    });

Temporary variable to hold of current cell value

var enable_editing_for_value = '';

The Grid

var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                text     : 'Something Random',
                flex     : 1,
                dataIndex: 'name',
                editor: {
                    xtype:'textfield'
                }
            }
        ],
        height: 350,
        width: 400,
        title:'Cell editing on demand Example',
        renderTo: 'playcontainer',
        plugins: [
             Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
                 // clicksToEdit can be either 1 (single click editing) or 2 (double click editing)
                 // in our example we want our cell value to be edited on click 
             })
        ],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype:'button',
                text:'Edit value',
                handler:function() {
                        var selection = grid.getView().getSelectionModel().getSelection()[0];
                        // so when user clicks on Edit value button out cell value is temporarily store in our holder variable
                        // this is just an example you may want to do the same on column index or column name
                        enable_editing_for_value = selection.data.name;
                }
            }]
        }]
 
    });

Now that our Grid is declared and the stage is set now is the time to introduce one final thing that will check on if a cell is editable or not.

Remember that our cell is on editable if user selects and click our ‘Edit value‘ button

The Grid Event

grid.on('beforeedit',function(editor,a,eOpts) {
            if(a.value == enable_editing_for_value) {
                return true;
            }
            return false;
    });

Let me explain what is happening in our event handler. As you can see that event ‘beforeedit‘ is handled by our code. What this means is that when user try to click on our editable cell ‘beforeedit‘ fires and thus giving us a chance to compare it with what we got in enable_editing_for_value variable which hold the value of cell that was selected and then making it editable by click on our button ‘Edit value‘.

Now this is just a starting point. You can take it to another level and you can work on rows and cells, thus making cells of your choice editable.

The Demo

Demo for this post is located here

http://jaspreetchahal.org/examples/extjs-cell-editing-on-demand.html

I hope that if this post was not what you were after then it would open up another way which you can follow to achieve what you are trying to achieve.

Cheers