We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 38677
    • 21 Posts
    Hi,

    We are currently creating a custom-extension of the MODX Manager (2.2.14-pl) for a client. It is integrated into its own component and the component holds multiple sub-levels for custom DB management. All good. All done before.

    We are using the standard extJS functionality to create data grids and add/edit/duplicate/delete functionality with modal windows. Still all good. Not problems.

    Now, there is one section which has particularly many DB fields. Fitting them into the modal window will be impractical for the user. We figured, we spread the fields 'themed' across various tabs within the modal window. (See screenshot.) Very quickly we discovered that when doing so, the form validation fails. When clicking 'create' we can save the data even though fields that have been marked as compulsory are empty.

    Following is the components utils.js file which initiates the object (assets/components/ComponentName/js/modext/utils.js).

    MODx.window.CreateBoatsData = function(config) {
        config = config || {};
        Ext.applyIf(config,{
    		id: 'modx-window-boats-create'
            ,title: _('wmg.boats.create')
            ,baseParams: { action: 'boats_create'}
    		,width: 800
    		,autoHeight: false
    		,height: Ext.getBody().getViewSize().height*.95
    		,autoScroll: true
    		,labelAlign: 'top'
    		,items: [{
                html: '<h2>' + _('wmg.boats.information') + '</h2>'
                ,border: false
                ,cls: 'modx-page-header'
            },{
    			xtype: 'modx-tabs'
    			,defaults: { border: false ,autoHeight: true }
    			,border: true
    			,items: this.getFields(config)
            }]
        });
        MODx.window.CreateBoatsData.superclass.constructor.call(this,config);
    };
    
    Ext.extend(MODx.window.CreateBoatsData,MODx.Window,{
        getFields: function(config) {
            var f = [{
                title: _('wmg.boats.tab_general')
                ,defaults: { autoHeight: true }
                ,cls: 'main-wrapper form-with-labels'
                ,items: this.getGeneralFields(config)
            },{
                title: _('wmg.boats.tab_facilities')
                ,defaults: { autoHeight: true }
                ,cls: 'main-wrapper form-with-labels'
                ,items: this.getFacilitiesFields(config)
            },{
                title: _('wmg.boats.tab_tech_specifications')
                ,defaults: { autoHeight: true }
                ,cls: 'main-wrapper form-with-labels'
                ,items: this.getTechSpecificationsFields(config)
            }];
            return f;
        }
    
        ,getGeneralFields: function(config) {
            return [{
                layout: 'column'
    			,border: false
    			,defaults: {
    				layout: 'form'
    				,labelAlign: 'top'
    				,anchor: '100%'
    				,border: false
    			}
                ,items: [{
    				columnWidth: .5
    				,items: [{
    					fieldLabel: _('wmg.boats.header_boatName_en')
    					,name: 'boatName_en'
    					,xtype: 'textfield'
    					,allowBlank: false
    					,anchor: '100%'
    				},{
    					fieldLabel: _('wmg.boats.header_boatDescription_en')
    					,name: 'boatDescription_en'
    					,xtype: 'textarea'
    					,allowBlank: false
    					,anchor: '100%'
    				}]
    			},{
    				columnWidth: .5
    				,items: [{
    					fieldLabel: _('wmg.boats.header_boatName_de')
    					,name: 'boatName_de'
    					,xtype: 'textfield'
    					,anchor: '100%'
    				},{
    					fieldLabel: _('wmg.boats.header_boatDescription_de')
    					,name: 'boatDescription_de'
    					,xtype: 'textarea'
    					,anchor: '100%'
    				}]
    			}]
            }];
        }
    	,getFacilitiesFields: function(config) {
            return [{
                layout: 'column'
    			,border: false
    			,defaults: {
    				layout: 'form'
    				,labelAlign: 'top'
    				,anchor: '100%'
    				,border: false
    			}
                ,items: [{
                    columnWidth: .5
                    ,items: [{
                        fieldLabel: _('wmg.boats.header_boatDescription_en')
    					,name: 'boatDescription_en1'
    					,xtype: 'textarea'
    					,allowBlank: false
    					,anchor: '100%'
                    }]
                },{
                    columnWidth: .5
                    ,items: [{
                        fieldLabel: _('wmg.boats.header_boatDescription_de')
    					,name: 'boatDescription_de1'
    					,xtype: 'textarea'
    					,anchor: '100%'
                    }]
                }]
            }];
        }
    	,getTechSpecificationsFields: function(config) {
            return [{
                layout: 'column'
    			,border: false
    			,defaults: {
    				layout: 'form'
    				,labelAlign: 'top'
    				,anchor: '100%'
    				,border: false
    			}
                ,items: [{
                    columnWidth: .5
                    ,items: [{
                        fieldLabel: _('wmg.boats.header_boatDescription_en')
    					,name: 'boatDescription_en2'
    					,xtype: 'textarea'
    					,allowBlank: false
    					,anchor: '100%'
                    }]
                },{
                    columnWidth: .5
                    ,items: [{
                        fieldLabel: _('wmg.boats.header_boatDescription_de')
    					,name: 'boatDescription_de2'
    					,xtype: 'textarea'
    					,anchor: '100%'
                    }]
                }]
            }];
        }
    });
    Ext.reg('modx-window-boats-create',MODx.window.CreateBoatsData);


    Does anybody have an idea/cue how to solve this issue? We can put this particular module directly into the browser instead of using modal. But this may/will be confusing to the user.

    Help is much appreciated. If more code and/or explanation is needed, please let me know.

    Adrian
    [ed. note: elgrandeadi last edited this post 12 years, 4 months ago.]
      • 4172
      • 5,888 Posts
      within MIGXdb I have added server-side validation (only required is implemented by default)
      this is the part, which does the validation in the update-processor:
      https://github.com/Bruno17/MIGX/commit/2f259cad430effb903fb63cbf84129b868d138b8#diff-18f9da3249d005b6fd026a21da99e0d1R152

      It returns
      $modx->error->failure

      if one field is not valid and doesn't save anything, then.
      On client-side it is showing an alert with infos about the reason and doesn't close the modal-window.
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
        • 38677
        • 21 Posts
        Hi Bruno,

        Thanks for the reply.

        Is this going to work in MODx.Window?

        I was hoping for an easy trick to get all custom functionality work, even when using tabs in MODx.Window. Any other ideas?

        Thank you.
        Adrian
          • 44195
          • 293 Posts
          Have you tried using addFieldError() in your modObjectCreateProcessor?

          e.g.
          public function beforeSave() {
                  $name = $this->getProperty('name');
                  $description= $this->getProperty('description');
          
          
                  if (empty($name)) { // checks if field is empty
                      $this->addFieldError('name',$this->modx->lexicon('yourcomponent.boat_err_ns_name'));
                  } else if ($this->doesAlreadyExist(array('name' => $name))) { // checks if a duplicate of this entry already exists
                      $this->addFieldError('name',$this->modx->lexicon('yourcomponent.boat_err_ae_name'));
                  }
          
                  if (empty($description)) { // checks if field is empty
                      $this->addFieldError('description',$this->modx->lexicon('yourcomponent.boat_err_ns_description'));
                  }
                  return parent::beforeSave();
              }
          


          I found this to be far more reliable than extjs' allowBlank parameter.
            I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
            Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com
            • 33166
            • 9 Posts
            Quote from: Bruno17 at May 27, 2014, 11:47 PM
            within MIGXdb I have added server-side validation (only required is implemented by default)
            this is the part, which does the validation in the update-processor:
            https://github.com/Bruno17/MIGX/commit/2f259cad430effb903fb63cbf84129b868d138b8#diff-18f9da3249d005b6fd026a21da99e0d1R152

            It returns
            $modx->error->failure

            if one field is not valid and doesn't save anything, then.
            On client-side it is showing an alert with infos about the reason and doesn't close the modal-window.

            Hi Bruno, I dont seem to get the alert window, is there a specific config i need to add?

            Thanks,
            Jo.