Handling form error across multiple tabs

[blex]

I have a form that spans multiple tabs. Pressing the submit button submits the entire form. However if there is an error either before submission or found on the server a message dialog appears indicating you need to fix the error. However, the error may be on a non-selected tab.

Is the a "correct" (or easy) way to have the first tab where an error is found to be activated so it is obvious what they need to do?

I'm sure I can figure out some way but I'm new to Ext and would really like to make sure I'm doing this the way it was intended.

Thanks!

[tryanDLS]

The TabPanelItems have no knowledge of the Form and vice-versa. You'll have to manage the relationship between a specific field and the tab it appears on. You could add a propery to each field indicating it TabPaneItem or the fields to a collection property of each TabPanelItem. You could also provide try to locate the Field element in the dom and navigate up to find it's container and determine which TabPanelItem that is.

[blex]

I may be asking a simpler question. How do I know which field had an error and what is the best way to figure out what tab it is on?

[gitey]

Blex, can you please post me your example of submitting form spanning multiple tabs? Am having problem with submission of forms. The parameters dont get passed and all i get is null for all parameter values. Am using LayoutDialog to render my form and inside that i have used the tabs of the form for content panel. The submit button i tried adding to the form like
form.addButton(................)
Also i tried adding submit to the layout wherein i handler function i write form.submit()
Thanks in advance
Regards
Gitey

[blex]

There were several posts on the forum that helped me. I just searched on form and tab.

Unfortunately my code is far too complex right now to post right now - I will see if I can break it into a smaller example:

Here are some points:
1. turn autocreate off for the form
2. create an array of tabs. Here is an example

frmTabs[0] = profile_form.container({el:Ext.DomHelper.append(Ext.get('form-employee'), {tag:'div', style:'padding:20px'})});
... add some stuff to form
profile_form.end();
frmTabs[1] = profile_form.container({el:Ext.DomHelper.append(Ext.get('form-employee'), {tag:'div', style:'padding:20px'})});
...
profile_form.end();
profile_form.render('form-employee');

var tabPanel=new Ext.TabPanel('divTabPanel');
tabPanel.addTab(frmTabs[0].getEl().id,'Employee');
tabPanel.addTab(frmTabs[1].getEl().id,'Spouse');
tabPanel.addTab(frmTabs[2].getEl().id,'Dependents');
tabPanel.activate(0);

[FragMaster B]

Hi blex, I've been hunting the forums for this same thing and implemented a solution very similar to yours. Where I'm stuck at now is trying to add some columns to one of those tabs. Any idea on that?

BTW - I'm an extreme EXT noob. Just starting to play with it.

[gitey]

Hey Blex am posting you my code. See if anything u can make out.
Ive tried all the options suggested in the forums. All threads i searched but i am not able to fix the posting error.
Heres my code....
var form = new Ext.form.Form({
labelAlign: 'left',
labelWidth: 300,

});

form.column({width:342, labelWidth:75}); // open column, without auto close

var formContainerTabs = form.container();
form.end();
//var formTabs = new Array();(I did try using array of tabs)

var firstTab = form.container({el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'}),title:'Login Information'},
new Ext.form.Field({
id:'companyId',
fieldLabel: 'Company Code',
name: 'companyId',
//grow: true,
//preventScrollbars:true,
width: 220
}),
new Ext.form.Field({
fieldLabel: 'Company Name',
name: 'companyName',
//grow: true,
//preventScrollbars:true,
width: 220
})

);

var secondTab = form.container(
{el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},

new Ext.form.TextArea({
fieldLabel:'Address1',
allowBlank: false,
grow:false,
name:'address1'
//vtype:
}),
new Ext.form.TextArea({
fieldLabel:'Address2',
allowBlank: false,
grow:false,
name:'address2'
//vtype:
}),

);
var thirdTab = form.container(
{el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},
new Ext.form.Field({
fieldLabel:'Contact Person',
allowBlank: false,
grow:false,
name:'contactPerson'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Phone1',
allowBlank: false,
grow:false,
name:'phone1'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Phone2',
allowBlank: false,
grow:false,
name:'phone2'
//vtype:
})

);

var fourthTab = form.container(
{el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},
new Ext.form.Field({
fieldLabel:'UserID',
allowBlank: false,
grow:false,
name:'userId'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Password',
allowBlank: false,
grow:false,
name:'password'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Credit Limit',
allowBlank:false,
//allowNegative:false,
grow:false,
name:'creditLimit'
//vtype:
})

);



//tried adding button to form and then handling it
form.addButton({text: 'Save', handler: function (){

var c = form.getValues();
alert(c.companyId);
form.submit({

waitMsg:'Adding new acc',
reset: false,
failure: function(form, action) {
Ext.MessageBox.alert('Error Message', action.result.errorInfo);
},
success: function(form , action) {
Ext.MessageBox.alert('Supplier Added', action.result.info);
dialog.hide();
ds.load({params:{start:0, limit:5}});
},

url:'suppliermasteradd.do',

})}});
form.render('divForm');
//This is the code i tried of making a Tab Panl which did not work
/*var tabPanel=new Ext.TabPanel(formContainerTabs.el);
tabPanel.addTab(formTabs[0].getEl().id,'Company Creation');
tabPanel.addTab(formTabs[1].getEl().id,'Location');
tabPanel.addTab(formTabs[2].getEl().id,'Contact Information');
tabPanel.addTab(formTabs[3].getEl().id,'Login Info');

tabPanel.activate(0);*/

form.end();
layout.beginUpdate();
//layout.add('center', new Ext.ContentPanel(Ext.id(),tabPanel));(Layout does not take tabPanel so had to insert tabPabel inside content panel(juss an experiment)
//layout.add('center',tabPanel);
var first = new Ext.ContentPanel(firstTab.getEl());
first.title = 'Company Creation';
var second = new Ext.ContentPanel(secondTab.getEl());
second.title = 'Location';
var third = new Ext.ContentPanel(thirdTab.getEl());
third.title = 'Contact Information';
var fourth = new Ext.ContentPanel(fourthTab.getEl());
fourth.title = 'Login Info';
layout.add('center', first);
layout.add('center', second);
layout.add('center', third);
layout.add('center', fourth);
layout.endUpdate();
alert(form.creditLimit);
//tried adding submit to layout and then invoking form.submit()
var submit='submit';
dialog.addButton({text:'Save', handler:function(){

var c = form.getValues();
alert(c.companyId);
form.submit({

waitMsg:'Adding acc..',
reset: false,
failure: function(form, action) {
Ext.MessageBox.alert('Error Message', action.result.errorInfo);
},
success: function(form , action) {
Ext.MessageBox.alert('Supplier Added', action.result.info);
dialog.hide();
ds.load({params:{start:0, limit:5}});
},
//action:'suppliermasteradd.do',
method:'POST',
url:'suppliermasteradd.do',
//params: .............(if i explicity hardcode the parameters then everything is working fine...but this is not the way form shud be submitted rite...
})}});



dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Reset', form.reset, dialog);
dialog.show();
//form.render('form1');
//form.add('form1');
};

};
In some code they had suggested to override form.render(). Even that i did but the problem persists.
For the example u suggested i suppose there is no need of overriding any method. The problem i think is of rendering the form in DialogLayout and the placement of SUBMIT button(form or layout). I tried all combinations but its not working. If theres only one form(non-tabbed) then my application is working fine. Please someone suggest me a solutions.
regards
Gitey
Gitanjali

[blex]

Hi blex, I've been hunting the forums for this same thing and implemented a solution very similar to yours. Where I'm stuck at now is trying to add some columns to one of those tabs. Any idea on that?

BTW - I'm an extreme EXT noob. Just starting to play with it.

I'm pretty new too :)

Do you have code for what you are trying to do? I did columns by creating containers and then putting them in another container. It seemed to work fine.

[blex]

The only thing I notice is that you end the form after you render it. I think the form.end should come before the render?

Hey Blex am posting you my code. See if anything u can make out.
Ive tried all the options suggested in the forums. All threads i searched but i am not able to fix the posting error.
Heres my code....
var form = new Ext.form.Form({
labelAlign: 'left',
labelWidth: 300,

});

form.column({width:342, labelWidth:75}); // open column, without auto close

var formContainerTabs = form.container();
form.end();
//var formTabs = new Array();(I did try using array of tabs)

var firstTab = form.container({el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'}),title:'Login Information'},
new Ext.form.Field({
id:'companyId',
fieldLabel: 'Company Code',
name: 'companyId',
//grow: true,
//preventScrollbars:true,
width: 220
}),
new Ext.form.Field({
fieldLabel: 'Company Name',
name: 'companyName',
//grow: true,
//preventScrollbars:true,
width: 220
})

);

var secondTab = form.container(
{el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},

new Ext.form.TextArea({
fieldLabel:'Address1',
allowBlank: false,
grow:false,
name:'address1'
//vtype:
}),
new Ext.form.TextArea({
fieldLabel:'Address2',
allowBlank: false,
grow:false,
name:'address2'
//vtype:
}),

);
var thirdTab = form.container(
{el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},
new Ext.form.Field({
fieldLabel:'Contact Person',
allowBlank: false,
grow:false,
name:'contactPerson'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Phone1',
allowBlank: false,
grow:false,
name:'phone1'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Phone2',
allowBlank: false,
grow:false,
name:'phone2'
//vtype:
})

);

var fourthTab = form.container(
{el:Ext.DomHelper.append(Ext.get('divForm'), {tag:'div', style:'padding:20px'})},
new Ext.form.Field({
fieldLabel:'UserID',
allowBlank: false,
grow:false,
name:'userId'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Password',
allowBlank: false,
grow:false,
name:'password'
//vtype:
}),
new Ext.form.Field({
fieldLabel:'Credit Limit',
allowBlank:false,
//allowNegative:false,
grow:false,
name:'creditLimit'
//vtype:
})

);



//tried adding button to form and then handling it
form.addButton({text: 'Save', handler: function (){

var c = form.getValues();
alert(c.companyId);
form.submit({

waitMsg:'Adding new acc',
reset: false,
failure: function(form, action) {
Ext.MessageBox.alert('Error Message', action.result.errorInfo);
},
success: function(form , action) {
Ext.MessageBox.alert('Supplier Added', action.result.info);
dialog.hide();
ds.load({params:{start:0, limit:5}});
},

url:'suppliermasteradd.do',

})}});
form.render('divForm');
//This is the code i tried of making a Tab Panl which did not work
/*var tabPanel=new Ext.TabPanel(formContainerTabs.el);
tabPanel.addTab(formTabs[0].getEl().id,'Company Creation');
tabPanel.addTab(formTabs[1].getEl().id,'Location');
tabPanel.addTab(formTabs[2].getEl().id,'Contact Information');
tabPanel.addTab(formTabs[3].getEl().id,'Login Info');

tabPanel.activate(0);*/

form.end();
layout.beginUpdate();
//layout.add('center', new Ext.ContentPanel(Ext.id(),tabPanel));(Layout does not take tabPanel so had to insert tabPabel inside content panel(juss an experiment)
//layout.add('center',tabPanel);
var first = new Ext.ContentPanel(firstTab.getEl());
first.title = 'Company Creation';
var second = new Ext.ContentPanel(secondTab.getEl());
second.title = 'Location';
var third = new Ext.ContentPanel(thirdTab.getEl());
third.title = 'Contact Information';
var fourth = new Ext.ContentPanel(fourthTab.getEl());
fourth.title = 'Login Info';
layout.add('center', first);
layout.add('center', second);
layout.add('center', third);
layout.add('center', fourth);
layout.endUpdate();
alert(form.creditLimit);
//tried adding submit to layout and then invoking form.submit()
var submit='submit';
dialog.addButton({text:'Save', handler:function(){

var c = form.getValues();
alert(c.companyId);
form.submit({

waitMsg:'Adding acc..',
reset: false,
failure: function(form, action) {
Ext.MessageBox.alert('Error Message', action.result.errorInfo);
},
success: function(form , action) {
Ext.MessageBox.alert('Supplier Added', action.result.info);
dialog.hide();
ds.load({params:{start:0, limit:5}});
},
//action:'suppliermasteradd.do',
method:'POST',
url:'suppliermasteradd.do',
//params: .............(if i explicity hardcode the parameters then everything is working fine...but this is not the way form shud be submitted rite...
})}});



dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Reset', form.reset, dialog);
dialog.show();
//form.render('form1');
//form.add('form1');
};

};
In some code they had suggested to override form.render(). Even that i did but the problem persists.
For the example u suggested i suppose there is no need of overriding any method. The problem i think is of rendering the form in DialogLayout and the placement of SUBMIT button(form or layout). I tried all combinations but its not working. If theres only one form(non-tabbed) then my application is working fine. Please someone suggest me a solutions.
regards
Gitey
Gitanjali

[FragMaster B]

I'm pretty new too :)

Do you have code for what you are trying to do? I did columns by creating containers and then putting them in another container. It seemed to work fine.

Here's what my code looks like. Same concept as what you've posted. Thanks for taking a look and offering advice. I tried to distill it down some to make it easier to follow. Basically what I'd like to do is get the two comboboxes to appear in columns so they are side by side (below the textbox) instead of one after another in line breaks.



reviewForm = new Ext.form.Form({
url:'/_includes/xba_review_save.php',
autoCreate: false,
labelAlign: 'top',
labelWidth: 175,
buttonAlign: 'right'
});

//Container for tabs
var frmContainerTabs = reviewForm.container();
reviewForm.end();

//Create tabs.
var frmTabs = [
{
title: 'Overall',
container:
reviewForm.container(
{el:Ext.DomHelper.append(Ext.get('reviewForm'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextArea({
fieldLabel: 'Overall Description',
name: 'OverallDescription',
value: '',
width: 550,
height: 180
}),
new Ext.form.ComboBox({
fieldLabel: 'Overall Rating',
hiddenName: 'OverallRating',
store: new Ext.data.SimpleStore({
fields: ['score', 'scoreDisplay'],
data : Ext.reviewData.majorScores
}),
displayField: 'scoreDisplay',
mode: 'local',
triggerAction: 'all',
emptyText:' - ',
selectOnFocus:true,
width:100
}),
new Ext.form.ComboBox({
fieldLabel: 'Gameplay Rating',
hiddenName: 'GameplayRating',
store: new Ext.data.SimpleStore({
fields: ['score', 'scoreDisplay'],
data : Ext.reviewData.majorScores
}),
displayField: 'scoreDisplay',
mode: 'local',
triggerAction: 'all',
emptyText:' - ',
selectOnFocus:true,
width:100
})
)
},
{
title: 'Gameplay Description',
container:
reviewForm.container(
{el:Ext.DomHelper.append(Ext.get('reviewForm'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextArea({
fieldLabel: 'Gameplay Description',
name: 'GameplayDescription',
value: '',
width: 550,
height: 180
})
)
}
];

//Render form on page.
reviewForm.render('reviewForm');

//Render tabs.
var tabPanel = new Ext.TabPanel(frmContainerTabs.el);
frmTabs.each(function(el){
tabPanel.addTab(el.container.getEl().id, el.title);
});
tabPanel.activate(0);

[shadun]

To get back to topic (even though the TS probably already found a solutions),
anyone else having the same issue:

Every field has the event "invalid", which fires when the field is marked as invalid. So just use

field.on("invalid", function(){
//Activate Tab which you should now be able to access thru closure
});