How to refresh an extjs window (Ext.Window) on its button click

Question

I have an Extjs window which has two buttons 'Save and Refresh' and 'Clear' Buttons.

Now I need to refresh the window on button click of the 'Save and Refresh' button.

could you please explain me how to do this?

Thanking You,

Regards, Sathya

Solution 1

You'll need a reference to the button. Hopefully you already have one in your code, but if not you could try the Ext.Windows public "buttons" property:

var = saveAndRefreshButton = myExtWindow.buttons[0]; // or 1

Although if I remember right the buttons property went away in 4.0... all the more reason to keep your own reference to the button.

To reload the page as soon as the button is clicked:

saveAndRefreshButton.on('click', function() {
    window.location.reload();  // standard JavaScript to reload a page.
});

more likely you'll want to wait for an AJAX request to complete the save (guessing based on the ajax tag on your question and common sense)

saveAndRefreshButton.on('click', function() {
    Ext.Ajax.request({
        url: 'save.php',
        // jsonData, params, or whatever to pass down the data to save,
        success: function() {
            window.location.reload();
        },
        failure: function() {
            // couldn't save... show an error or something.
        }
    });
});

Solution 2

I think, you need two steps for this. save an then refresh

try to use meta http-equiv="refresh"

<?php print "<meta http-equiv=\"refresh\" content=\"1;URL=SOMETHING.PAGE\">"; ?>

Solution 3

i think you have form in the window. so, you should bind a handler to save & refresh button.

you can use submit method. and you can bind a callback function to submit. you can refer to docs. here a sample submit implementation taken from docs;

myFormPanel.getForm().submit({
    clientValidation: true,
    url: 'updateConsignment.php',
    params: {
        newStatus: 'delivered'
    },
    success: function(form, action) {
        Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.Action.SERVER_INVALID:
               Ext.Msg.alert('Failure', action.result.msg);
       }
    }
});

on the server side you should prepare a response like this:

for successful operation:

{
    "success":true, // note this is Boolean, not string
    "msg":"Consignment updated"
}

for a failed operation:

{
    "success":false, // note this is Boolean, not string
    "msg":"You do not have permission to perform this operation"
}

you can use response object to send updated ( to-be-refreshed ) data. on form's submit callback function, you can get the response data and use it to refresh the form.

hope that helps

Comments

[Satya]

Actually I am using Extjs with Java spring combination. Can you use same code ? or Is it related to PHP?

[olooney]

"save.php" is placeholder for whichever URL handles to save. You'll have to write that server-side, but this is what the ExtJS client code will look like.