RSS

Show tab with invalid controls when validating the form

07 Feb

ExtJs Tab Panel

Wouldn’t it be nice if in addition to highlighting invalid controls, FormPanel makes the tab that contains invalid control active? If you think it’s handy too then the following code will help you to achieve it.

What we need to do is overrite isValid() method of the BasicForm which is the parent of all other form components, such as FormPanel for example.

Ext.custom.FormPanel = Ext.extend(Ext.form.FormPanel, 
{

Check if form has a Tab Panel as it’s child. For this filter form’s controls by their xtype. See ExtJs documentation function for more details on filterBy function.

	
findChildTabPanel: function()
{
	var tabPanels = this.items.filterBy(function(c){ return c.getXType()=='tabpanel'; });
	if (tabPanels.items[0]) return true;
	return false;
},
overriteIsValid: function()
{
	var self = this;
	Ext.override(Ext.form.BasicForm, 
	{
		isValid: function(e) {
			var valid = true;
			var firstInvalidField = null;
					
			self.getForm().items.each(function(f)
			{
				if(!f.validate())
				{
					valid = false;
					f.markInvalid();
					if (firstInvalidField == null) firstInvalidField = f;
				}
			});
				
			if (firstInvalidField) 
			{
				var tab; 
				var tabbedPanel = firstInvalidField.findParentBy(
					function(p)
   			         {
			             if (p.isXType('tabpanel'))
			             {
			               	return true; 
			             }
			             tab = p;
			        });
			       if ((!Ext.isEmpty(tab,false)) && 
                   (!Ext.isEmpty(tabbedPanel,false)
                   { 
		              tabbedPanel.activate(tab.getId());  
		           } 
			}
			return valid;
		}
	});
},

Check if the form contains Tab Grid then override IsValid() method during component initialisation.

initComponent: function()
{
	Ext.taopix.FormPanel.superclass.initComponent.apply(this,arguments);
	
        this.on('afterlayout', function() { 
                if (this.findChildTabPanel()) this.overriteIsValid(); 
        }, this);
}
	
});

And register xtype type for new component:

Ext.reg('taopixFormPanel', Ext.taopix.FormPanel );

You can see working example here.

Advertisements
 
Leave a comment

Posted by on February 7, 2011 in Sencha

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: