extjs Event to update a Grid

Question

I need a grid built in extjs designer to add data to the grid on an event.

so I should have a function that when called with receivedMsg as Args, sends the array data to be added as a new record in the grid.

I do not want it to go out and refresh a json file, not very network friendly.

I have written the server backend myself, and implemented websockets to generate the receivedMsg event.

How can I do this?

Here is where the event should go:

    /*
 * File: app/view/MyGridPanel.js
 * Date: Sat Jan 14 2012 14:58:07 GMT-0500 (Eastern Standard Time)
 *
 * This file was generated by Ext Designer version 1.2.2.
 * http://www.sencha.com/products/designer/
 *
 * This file will be generated the first time you export.
 *
 * You should implement event handling and custom methods in this
 * class.
 */

Ext.define('MyApp.view.MyGridPanel', {
    extend: 'MyApp.view.ui.MyGridPanel',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    }
});


[
["Ace Supplies", "Emma Knauer", "555-3529"],
["Best Goods", "Joseph Kahn", "555-8797"],
["First Choice", "Matthew Willbanks", "555-4954"],
["First Choice", "Matthew Willbanks", "555-4954"]
]

egerardus · Accepted Answer · 2012-01-14T21:32:07.920

If I understand the question properly, the array that you want to add as a record would first have to be converted into an instance of the same Ext.data.Model that your grid is using. Then you could call your "grid.store.insert()" method. For example, if your grid is using a model called 'Employee' like this:

// Grid data model
Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',   type: 'int'},
        {name: 'email',  type: 'string'},
        {name: 'start',  type: 'date'},
        {name: 'salary', type: 'int'},
        {name: 'active', type: 'bool'}
    ]
});

You could create the model instance outside of the function with your data and just pass that as the function args, or if you can only get the data as an array (hopefully you can set the sequence), you can create the model instance inside the function itself, shown here:

// the function you wanted
addRecord: function(myRecordArray) {

    // Create a model instance
    var r = Ext.create('Employee', {
        name: myRecordArray[0],
        email: myRecordArray[1],
        start: myRecordArray[2],
        salary: myRecordArray[3],
        active: myRecordArray[4]
    });

    // get the grid store and the number of records in it
    var store = this.getStore();
    var maxIndex = store.getCount();

    // adds record to the end of the grid (args are: index, Ext.data.Model[])
    store.insert(maxIndex, r) 

}

You would probably have to tweak this depending on how your store is set-up but that should get it started.

how would I call it? addRecord(Array)? also from an external function? — BAR, Jan 14 '12 at 21:48
You would call it from your MyGridPanel object. I haven't used the designer before so I am not sure how it creates these exactly, but it should be something like MyGridPanel.addRecord(Array)... — egerardus, Jan 14 '12 at 22:13

extjs Event to update a Grid

1 Answers1