ExtJS 'stay' event - how to redirect CMP after form save?

863 Posts

Lucas Reply #1, 14 years, 11 months ago

When editing a resource there are three blue buttons to select whether the page action will be 'Add another', 'Continue editing' or 'Close' after saving.

I'm including these in a CMP but am struggling to change the default behaviour of 'Continue Editing'.

The problem is when I'm on a 'create new' action. When it saves with 'Continue Editing' selected, my page action stays as 'create new' when it should instead refresh as 'update'. In fact this is what happens when creating MODx resources, but I can't replicate it.

Any idea how to hijack the default behaviour of the stay callback?

Ideally it will be called on the 'success' event, something like:


if((MODx.config.stay == 'stay') && (CMP.action == 'create')) {
    location.href = 'index.php'+'?a='+MODx.action['mycmp/action']+'&id='+r.result.object.id+'&action=update'; 
}

Hope that makes sense

25 Posts

simonp98 Reply #2, 14 years, 11 months ago

Just had to do the very thing!!

Add listeners to the Modx.FormPanel object that has the state buttons for the 'actionNew', 'actionContinue' and 'actionClose' events. (here is an example of the listeners)

,listeners: {
         'setup': {fn:this.setup,scope:this}
         ,'success': {fn:this.success,scope:this}
         ,'failure': {fn:this.failure,scope:this}
         ,'beforeSubmit': {fn:this.beforeSubmit,scope:this}
         ,'actionNew': {fn:this.actionRedirect,scope:this}
         ,'actionContinue': {fn:this.actionRedirect,scope:this}
         ,'actionClose': {fn:this.actionRedirect,scope:this}
        }

Then add the appropriate function to deal with the event. (here is an example)

actionRedirect: function() {
    	var stay = Ext.state.Manager.get('modx.stay.'+MODx.request.a,'stay');
		switch (stay) {
			case 'new':
			location.href = '?a='+MODx.request.a+'&action=create';
			break;
			case 'stay':
			location.href = '?a='+MODx.request.a+'&action=update';
			break;
			default:
			location.href = '?a='+MODx.request.a;
		};

OR

Just add the logic from the action redirect function to the 'success' handler where you have the success object available to grab the new resource ID or whatever you've returned. (here is an example)

success: function(o) {
            this.getForm().setValues(o.result.object);
            var stay = Ext.state.Manager.get('modx.stay.'+MODx.request.a,'stay');
			switch (stay) {
				case 'new':
				location.href = '?a='+MODx.request.a+'&action=create';
				break;
				case 'stay':
				location.href = '?a='+MODx.request.a+'&action=update&id='+o.result.object.id;
				break;
				default:
				location.href = '?a='+MODx.request.a;
			};

Edit: I've removed the console.log that Lucas spotted!!
[ed. note: simonp98 last edited this post 14 years, 11 months ago.]

863 Posts

Lucas Reply #3, 14 years, 11 months ago

You are a champion!

I left the page to work on some other parts of the project but I couldn't ignore it and came back to it today. Was just about to rewrite the whole page but saw your response just in time - didn't get a notification. For some reason I was trying to use the value 'edit' instead of 'stay' so the switch was always falling back to the default.

Just a note for anyone reading - there is a console.log; return; in the second code example. That will break the function before it gets to the redirect, just remove it.

Thanks again Simon!