<![CDATA[ Extjs / modExt: How to add special validation logic into save/update actions via Ext.override? - My Forums]]> https://forums.modx.com/thread/?thread=104895 <![CDATA[Extjs / modExt: How to add special validation logic into save/update actions via Ext.override?]]> https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564035 "A record with similar information was found: [firstname] [lastname] [email]. If you're sure the record you're saving is unique, click OK. Otherwise, click cancel."

What I've arrived at as a possible solution is to override the MODx.page.CreateResource and MODx.page.UpdateResource classes to add a handler to the save button to call a custom validation method. What I'm stuck on is figuring out the code needed to continue the normal process should the user press "OK." Here's an outline of the create override:

(function() {
	
	var origGetButtons = MODx.page.CreateResource.prototype.getButtons;

	Ext.override(MODx.page.CreateResource, {
	    
	    getButtons: function (cfg) {
	    	var items = origGetButtons.apply(this, arguments);
	    	items[0].handler = this.validateContact;
	    	return items;
	    },
	    
	    validateContact: function () {
	    	// Ajax request to connector/processor with validation php, returning 'unique' or 'confirm' (with additional data)
	    	if(unique){
	    		// code to continue process???
	    	} else {
				Ext.Msg.confirm('Validation Message','The record you are saving may be a duplicate. Continue?',function(e) {
	                if (e == 'yes') {
	                    // code to continue process???
	                } else {
						// not sure if anything is needed here if staying on the current create/edit page
	                }
	            },this);
			}
	});
})();


For reference the MODx.page.CreateResource subclass (from modext/sections/resource/create.js):

MODx.page.CreateResource = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        url: MODx.config.connector_url
        ,formpanel: 'modx-panel-resource'
        ,id: 'modx-page-update-resource'
        ,which_editor: 'none'
        ,action: 'resource/create'
    	,buttons: this.getButtons(config)
        ,components: [{
            xtype: config.panelXType || 'modx-panel-resource'
            ,renderTo: config.panelRenderTo || 'modx-panel-resource-div'
            ,resource: 0
            ,record: config.record
            ,publish_document: config.publish_document
            ,show_tvs: config.show_tvs
            ,mode: config.mode
            ,url: config.url
        }]
    });
    MODx.page.CreateResource.superclass.constructor.call(this,config);
};
Ext.extend(MODx.page.CreateResource,MODx.Component,{
    getButtons: function(cfg) {
        var btns = [];
        if (cfg.canSave == 1) {
            btns.push({
                process: 'resource/create'
                ,reload: true
                ,text: _('save')
                ,id: 'modx-abtn-save'
                ,cls:'primary-button'
                ,method: 'remote'
                ,keys: [{
                    key: MODx.config.keymap_save || 's'
                    ,ctrl: true
                }]
            });

        }
        btns.push({
            text: _('cancel')
            ,id: 'modx-abtn-cancel'
        });
        btns.push({
            text: _('help_ex')
            ,id: 'modx-abtn-help'
            ,handler: MODx.loadHelpPane
        });
        return btns;
    }
});
Ext.reg('modx-page-resource-create',MODx.page.CreateResource);


My sense is there's a simple solution here...any pointers are much appreciated!]]>
smg6511v2 Feb 11, 2019, 06:25 AM https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564035
<![CDATA[Re: Extjs / modExt: How to add special validation logic into save/update actions via Ext.override?]]> https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564285 smg6511v2 Mar 02, 2019, 06:59 AM https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564285 <![CDATA[Re: Extjs / modExt: How to add special validation logic into save/update actions via Ext.override?]]> https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564284 ]]> BobRay Mar 01, 2019, 10:59 PM https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564284 <![CDATA[Re: Extjs / modExt: How to add special validation logic into save/update actions via Ext.override? (Best Answer)]]> https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564283 modx.component.js one in particular), the Extjs documentation, and Googling the heck out various topics related to Extjs 3.4, I've arrived at a solution that works nicely. Below are the updated bare bones basics of my override, which excludes the additional code to generate the field data to send and the requisite processing of the response from my validator. I mainly wanted to communicate the part that would not be documented elsewhere. I've made some notes in the code to give more clarity to why particular lines are the way they are.

/*
    Note that XModify is my general-purpose js object for certain customizations. It's inserted OnDocFormRender 
    via a plugin [$modx->regClientStartupHTMLBlock($js)], and is registered before this override file is included
    [$modx->regClientStartupScript($file)]. The modeClass will either be 'CreateResource' or 'UpdateResource'
    depending upon the resource's $mode ('new' or 'upd'). That way, this override can handle both modes without
    duplicating what is mostly the same code for each.
*/
Ext.override(MODx.page[XModify.config.modeClass], {
    /*
        Set up references to the original methods we want to incorporate
    */
    refMethods: {
        getButtons: MODx.page[XModify.config.modeClass].prototype.getButtons,
        handleClick: MODx.toolbar.ActionButtons.prototype.handleClick
    },
 
    getButtons: function (cfg) {

        // get buttons as originally specified
        var items = this.refMethods.getButtons.apply(this,arguments), 
            idx_btn, 
            idx_kmap
            ;

        /* 
            Make adjustment to save button to trigger validation method; assuming save button is always first in the array ...
            there may be a more robust way to identify the save button
        */
        if(cfg.canSave == 1){
            /*
                Get the objects we want to modify by identifying their array indicies based on a specified key's value
            */
            idx_btn = items.map(function(o){return o.id;}).indexOf("modx-abtn-save");
            idx_kmap = items[idx_btn].keys.map(function(o){return o.key;}).indexOf("s");
            
            items[idx_btn].text = "Validate and Save";
            /*
                As we are replacing the original handler, the original handler's method will need to 
                be referenced and called from this override should the validation pass or is confirmed below
            */
            items[idx_btn].handler = this.validateContact;
            /*
                Replace the function triggered by this button's keymap. Note that itm is not the object we need
                when validateContact gets called from the keymap, so itm is further tested/defined in validateContact's vars below.
            */
            items[idx_btn].keys[idx_kmap].fn = this.validateContact;
        }
        return items;
    },
    validateContact: function (itm,e) {
         
        var form = Ext.getCmp(this.formpanel).getForm(),
            vals = form.getValues(),
            itm = itm !== null && typeof itm === "object" ? itm : Ext.getCmp("modx-abtn-save"),
            evt = e
            ;
         
        MODx.Ajax.request({
            url: XModify.config.url,
            params: {
                action: "mgr/resource/contact/validate"
            },
            listeners: {
                "success": { fn: function(r) {
                    // Get confirmation from user if validation, in this case uniqueness of this record, is questionable
                    switch(r.isUnique){

                        case "yes": 
                            this.handleClick(itm,evt);
                            break;

                        case "confirm":
                            Ext.Msg.confirm("Validation Message","The record you are saving may be a duplicate. Continue?",function(e) {
                                if (e == "yes") {
                                    /*
                                        Pass the itm and evt objects in their current state to a method in this override which 
                                        applies the method of the original prototype. Note that "e" cannot be used here as at this point
                                        it contains the event data of this msg; we must pass the original event obj which was copied into
                                        a new variable "evt" earlier in this validation method
                                    */
                                    this.handleClick(itm,evt);
                                } else {
                                    // optional logic if user presses no/cancel
                                }
                            },this);
                            break;

                        case "no":
                            Ext.Msg.show({
                                title: "Validation Warning",
                                msg: "This record duplicates information already present in another document <i>[doc info]</i>. Would you like to edit that record to change or add new information?",
                                icon: Ext.MessageBox.WARNING,
                                buttons: {
                                    yes: "Edit Existing", 
                                    cancel: true
                                }
                            });
                            break;
                    }
                     
                }, scope:this },
                "failure": { fn: function(r) {
                    // optional logic performed if request fails
                }, scope:this }
            }
        });
         
    },
    handleClick: function(itm,e){
        this.refMethods.handleClick.apply(this,arguments);
    }
});


If anyone sees a better way of coding this, please let me know. What I've arrived at is the result of some reverse engineering, much experimentation and a whole lot of console.log() calls! Thanks, hope this is useful to someone smiley]]>
smg6511v2 Mar 01, 2019, 10:42 PM https://forums.modx.com/thread/104895/extjs-modext-how-to-add-special-validation-logic-into-save-update-actions-via-ext-override#dis-post-564283