CODEWITHSUNDEEP
formsgridextjs4store
PaulW
PaulW

Reputation: 39

Using the EXTJS4 example under form/form-grid.js - how to reload grid after submit form

I am using EXTJS 4.0.7 gpl. I am working with the example under form/form-grid.js. I want to reload the grid in the example after I edit an entry that shows in the form.

I am loading data into the form-grid using a PHP web service. I have a handler set to process the form entry, when making edits, and update the value in the grid. It works fine and updates the database. on success I then call a reload for the store and see the JSON coming back on reload (in FireBug), using the below function call, but the data is not loading into the grid. How to do get the data that came back from the store load to fill into the grid and update.

I would like eventually to use MVC, but for now i want to be able to reload the grid in the form-grid on form.submit success.

I have a 'storeId' of 'tvdStore' on my store and I do a reload of the store using: 

{
    xtype: 'button',
    text: 'Save',
    style: 'margin: 0 5px 0 5px',
        handler: function (button) {

        // when this button is clicked, sumbit this form
        var form = this.up('form').getForm();

        var rating = form.findField("rating").getValue();
        var formTargetId = form.findField("ID").getValue();
        var formFamilyName = form.findField("FAMILYNAME").getValue();
        var formTargetName = form.findField("TARGETNAME").getValue();
        var formTableName = form.findField("TABLENAME").getValue();

        // convert the int value back to a string
        var stringVal = "";
        if (rating === true) {
            stringVal = 'Yes';
        } else if (rating === false) {
            stringVal = 'No';
        }

        form.submit({
            waitMsg: 'Saving...',       // Wait Message
            method: 'POST',
            params: { 'targetValue' : stringVal , 'targetId' : formTargetId , 'tableName' : targetName },
            url: 'app/model/target/GG/add-update_svc.php',
            success: function (form, action) { // When saving data success
                Ext.Msg.alert('Success', action.result.message);    

                // clear the form
                form.reset();

                // reload store
                Ext.data.StoreManager.lookup('tvdStore').load(
                    {
                        params: {
                            tableName: formTableName,
                            targetName: targetName,
                            familyName: formFamilyName
                        }
                    }
                );

            },
            failure: function (form, action) {      // when saving data failed
                Ext.MessageBox.alert ('Message','Saving data failed');
            }
        });
    }
}

I see the JSON come back in FireBug that should be loading into the grid, so the store is reloading, but I see no loadMask, and the grid itself never updates.

Upvotes: 2

Views: 1667

Answers (1)

sha
sha

Reputation: 17860

Actually you absolutely don't have and should not reload whole store after any update/delete/insert procedures. Store class has a logic which updates local copy of records after receiving result message from the server. So you might want to make sure your server returns proper message back and local copy is updated.

And grid should redraw updated record(s) automatically too.

Upvotes: 1

Related Questions