How to update a row on a grid from an alert window using ExtJs?

Question

I'm creating an app that simply shows customers information on a table, and if a user is being clicked then a pop-up window shows up showing user's information in a form (name and email). Within this PopUp I want to be able to update customers name and email and then when clicking on Update button I want the new information to show up on the table right away. As of right now I'm able to populate the table with customers' information as well as binding their information with the Pop-up window. But since I'm still kind of new to ExtJS I'm not really sure how to make the update to show right away on the table after clicking on update button. I would really appreciate any help!. Thanks a lot.

Here's my code that works just fine.

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
      href="https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug_1.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">


    Ext.define('UserModal', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'int'},
            {name: 'name', type: 'string'},
            {name: 'email', type: 'string'}
        ]
    });


    Ext.onReady(function () {

        // Ajax call
        var usersFromAJAX = Ext.create('Ext.data.Store', {
            storeId: 'user',
            model: 'UserModal',
            autoLoad: 'true',
            proxy: {
                type: 'ajax',
                url: 'example.json',
                reader: {
                    type: 'json',
                    root: 'customers'
                }
            }
        });

        // Setting up the Grid
        Ext.create('Ext.grid.Panel', {
            store: usersFromAJAX,
            id: 'user',
            title: 'Employees',
            iconCls: 'x-fa fa-users',
            listeners: {
                itemclick: function (view, index, item, record) {

                    var window = Ext.create('Ext.window.Window', {
                        xtype: 'formpanel',
                        title: 'Update Record',
                        width: 300,
                        height: 200,
                        floating: true,
                        centered: true,
                        modal: true,
                        record: record,
                        viewModel: {
                            data: {
                                employee: index.data// employee's name
                            }
                        },
                        items: [{
                            xtype: 'textfield',
                            id: 'firstname',
                            name: 'firstname',
                            fieldLabel: 'First Name',
                            bind: '{employee.name}' // biding employee's name

                        },
                            {
                                xtype: 'textfield',
                                name: 'firstname',
                                fieldLabel: 'Email',
                                bind: '{employee.email}' // biding employee's name

                            },

                            {
                                xtype: 'toolbar',
                                docked: 'bottom',
                                style:{
                                    background: "#ACCCE8",
                                    padding:'20px'
                                },
                                items: ['->', {
                                    xtype: 'button',
                                    text: 'Update',
                                    iconCls: 'x-fa fa-check',
                                    handler: function () {
                                        console.log("Updating name...");

                                   // Need to add something in here
                                     this.up('window').close();

                                    }
                                }, {
                                    xtype: 'button',
                                    text: 'Cancel',
                                    iconCls: 'x-fa fa-close',
                                    handler: function () {
                                        // this.up('formpanel').destroy();
                                        this.up('window').close();
                                        //this.up('window').destroy();
                                    }
                                }]
                            }]

                    })
                    window.show();
                }
            },
            columns: [{
                header: 'ID',
                dataIndex: 'id',
                sortable: false,
                hideable: true
            }, {
                header: 'NAME',
                dataIndex: 'name',
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1 // will take the whole table
            }],
            height: 300,
            width: 400,
            renderTo: Ext.getElementById("myTable")
        });
    });


</script>
</head>
<body>

<div id="myTable"></div>
</body> 
</html>

Here's the JSON that populates my table.

{
 "customers": [{
        "id": 1,
        "name": "Henry Watson",
        "email": "[email protected]"
    },
    {
        "id": 2,
        "name": "Lucy",
        "email": "[email protected]"
    },
    {
        "id": 3,
        "name": "Mike Brow",
        "email": "[email protected]"
    },
    {
        "id": 4,
        "name": "Mary Tempa",
        "email": "[email protected]"
    },
    {
        "id": 5,
        "name": "Beto Carlx",
        "email": "[email protected]"
    }
  ]
}

Evan Trimboli Evan Trimboli · Accepted Answer · 2017-08-20T22:29:08

Binding is for "live" data, so that means it will update the grid as you type. If you want to defer the changes until you hit a button, you can use methods on the form to do so:

Fiddle

Ext.define('UserModal', {
     extend: 'Ext.data.Model',
     fields: ['id', 'name', 'email']
 });

 Ext.onReady(function () {

     // Setting up the Grid
     Ext.create('Ext.grid.Panel', {
         store: {
             model: 'UserModal',
             autoLoad: 'true',
             proxy: {
                 type: 'ajax',
                 url: 'data1.json',
                 reader: {
                     type: 'json',
                     rootProperty: 'customers'
                 }
             }
         },
         listeners: {
             itemclick: function (view, record) {
                 var f = Ext.create('Ext.form.Panel', {
                     xtype: 'formpanel',
                     title: 'Update Record',
                     width: 300,
                     height: 200,
                     floating: true,
                     centered: true,
                     modal: true,
                     buttons: [{
                         text: 'Update',
                         iconCls: 'x-fa fa-check',
                         handler: function () {
                             f.updateRecord(record);
                             f.close();
                         }
                     }, {
                         text: 'Cancel',
                         iconCls: 'x-fa fa-close',
                         handler: function () {
                             f.close();
                         }
                     }],
                     items: [{
                         xtype: 'textfield',
                         id: 'firstname',
                         name: 'name',
                         fieldLabel: 'First Name'

                     }, {
                         xtype: 'textfield',
                         name: 'email',
                         fieldLabel: 'Email'

                     }]
                 })
                 f.show();
                 f.loadRecord(record);
             }
         },
         columns: [{
             header: 'ID',
             dataIndex: 'id',
             sortable: false,
             hideable: true
         }, {
             header: 'NAME',
             dataIndex: 'name',
         }, {
             header: 'Email',
             dataIndex: 'email',
             flex: 1 // will take the whole table
         }],
         height: 300,
         width: 400,
         renderTo: document.body
     });
 });

How to update a row on a grid from an alert window using ExtJs?

1 Answers