4

Firstly, sorry for my not very good english!

I need make next thing: ExtJS 3.4 Editable Grid (example), which will work with json format. Input source is in json format. I did it, all work fine, like in example.

I did:

  1. data downloading from database to array in php
  2. array is encoded to json format
  3. editable grid source is a page with json message now all working fine.

Now I need make this: I need to update data in database on cell updating in grid.

How can I do this? Didn't find anything in web.
Maybe there are some method like 'OnCellEditting' like in delphi7?

My js code:

Ext.onReady(function () {
    function formatDate(value) {
        return value ? value.dateFormat('M d, Y') : '';
    }

    // shorthand alias
    var fm = Ext.form;

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel({
        // specify any defaults for each column
        defaults: {
            sortable: false // columns are not sortable by default           
        },
        columns: [{
            header: 'ID',
            dataIndex: 'id',
            width: 30
        }, {
            id: 'firstname',
            header: 'Firstname',
            dataIndex: 'firstname',
            width: 220,
            // use shorthand alias defined above
            editor: new fm.TextField({
                allowBlank: false
            })
        }, {
            header: 'Lastname',
            dataIndex: 'lastname',
            width: 220,
            // use shorthand alias defined above
            editor: new fm.TextField({
                allowBlank: false
            })
        }]
    });

    // create the Data Store
    var store = new Ext.data.JsonStore({
        totalProperty: 'total', // total data, see json output
        root: 'results', // see json output
        url: '/grid/json',
        fields: [
            'firstname', 'lastname']
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'grid-editable',
        width: 440,
        height: 300,
        autoExpandColumn: 'firstname', // column with this id will be expanded
        title: 'Edit Plants?',
        frame: true,
        clicksToEdit: 1
    });

    // manually trigger the data store load
    store.load({
        // store loading is asynchronous, use a load listener or callback to handle results

    });
});
Asken
  • 7,679
  • 10
  • 45
  • 77
Sharikov Vladislav
  • 7,049
  • 9
  • 50
  • 87

1 Answers1

6

The easiest way for you is to send an ajax request on each change

{
    id: 'firstname',
    header: 'Firstname',
    dataIndex: 'firstname',
    width: 220,
    // use shorthand alias defined above
    editor: new fm.TextField({
        allowBlank: false,
        listeners : {
            change : function(field, e) {
                Ext.Ajax.request({
                    url: '/grid/save', // your backend url
                    method: 'POST',
                    params: {
                        'id': grid.getSelectionModel().selection.record.get('id'),
                        'firstname': field.getValue()
                    }
                });
            }
        }
    })
}

but I think you should take a look at the extjs examples and read more about the Store communication with the server (for example with REST).

Darin Kolev
  • 3,401
  • 13
  • 31
  • 46
  • Thank you very much. It works! When I edit cell request sending to right page, ok. Its easy to check what parameters were sent and update them on database, BUT! I need ID to update right row. How should I send both id of row in db and parameter? something like params: {'id': **something_which_return_id**, 'firstname': field.getValue() } – Sharikov Vladislav Jan 08 '14 at 10:39
  • 1
    I updated my answer, please take a look if that is what you need – Darin Kolev Jan 08 '14 at 10:45
  • Hm. Thank you for you answer. I think it is what I need. I added id field to column model (look edit on my question), but anyway it don't send anything. What's wrong? – Sharikov Vladislav Jan 08 '14 at 10:58
  • 1
    Can you see the id in the row? – Darin Kolev Jan 08 '14 at 11:02
  • What do you mean? Yes, when I added id column I can see it in grid, but anyway it don't works. I just see this error in firebug: TypeError: grid.getSelectionModel(...).getSelection is not a function 'id': grid.getSelectionModel().getSelection().get('id'), – Sharikov Vladislav Jan 08 '14 at 11:05
  • 1
    ok, my mistake, it is `.getSelections()` http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.RowSelectionModel-method-getSelections – Darin Kolev Jan 08 '14 at 11:15
  • Argh :) Yes I saw your edit, but firebug say same: TypeError: grid.getSelectionModel(...).getSelections is not a function 'id': grid.getSelectionModel().getSelections()[0].get('id'), – Sharikov Vladislav Jan 08 '14 at 11:16
  • Finally! All work now :) Thank you very much. Now another problem , but it is another question :D how to hide id column in grid :) – Sharikov Vladislav Jan 08 '14 at 11:31
  • 1
    `hidden: true` please upvote my answer if you are happy with it – Darin Kolev Jan 08 '14 at 11:32
  • I tried hidden: true. In the column model right? Not worked for me. Update: I tried it again and now its working. Magic. Thank you again. About upvote: I tried 3 times yet :) but I don't have enought reputation for it. Same for comments. Don't know how to mark comment as usefull. Sorry :( – Sharikov Vladislav Jan 08 '14 at 11:34
  • Are you satifsfied now ? :))) – Sharikov Vladislav May 17 '14 at 10:26