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.]