Help Setting Active Tab On Invalid Validation

[finch]

Hi Everyone...

I am struggling on changing the active tab in a application i am creating.
I have a tabpanel with a couple tabs on it. within these tabs there are text fields with various validators. when a user clicks on the save button on the form i want the tab with the first invalid textfield to become active. I have managed to set the focus on to the first invalid textfield though i have not been able to change the active tab.

Here is my code:

    var fs = new Ext.FormPanel({
        frame: true,
        id: "UpdateForm",
        labelAlign: 'right',
        labelWidth: 150,
        width: 400,
        items:
        [
            {
                xtype: 'tabpanel',
                activeTab: 0,
                id: 'UpdatePanel',
                deferredRender: false,
                bodyBorder: false,
                defaults: { autoHeight: true, bodyStyle: 'padding:10px' },
                layoutOnTabChange: true,
                items:
                [
                    {
                        title: 'Transaction Details',
                        layout: 'form',
                        items: fsTransactionDetails
                    },
                    {
                        title: 'VAT',
                        layout: 'form',
                        items: fsVatOptions
                    },
                    {
                        title: 'Updates',
                        layout: 'form',
                        items: fsUpdate
                    }
                ]
            }
        ]
    });

    //FORMPANEL DECLARATIONS - END

    //WINDOW DECLARATIONS - START


    var firstInvalid;
    var test;

    var window = new Ext.Window
    ({
        title: 'Raw Materials Masterfile',
        width: 500,
        height: 380,
        id: "UpdateWindow",
        minWidth: 300,
        minHeight: 300,
        modal: true,
        draggable: false,
        layout: 'fit',
        plain: true,
        hidden: true,
        resizable: false,
        bodyStyle: 'padding:5px;',
        buttonAlign: 'center',
        closable: false,
        items: fs,
        buttons:
        [
            {
                text: 'Save',
                handler: function() {
                    if (fs.getForm().isValid()) {
                        fn_saveRecord();
                    }
                    else {


                        firstInvalid = fs.getForm().items.find(function(f) { return !f.isValid(); });


                        if (firstInvalid) {
                            firstInvalid.focus();
                            alert(firstInvalid.name);
                            alert(firstInvalid.ownerCt.getId());
                            alert(firstInvalid.findParentByType('tabpanel').ownerCt.getId());
                            
                        }
                        Ext.MessageBox.alert('Validation Failed', 'Please ensure that all fields contain valid values.');
                    }
                }
            },
            {
                text: 'Cancel',
                handler: function() {
                    fs.getForm().reset({ waitMsg: 'Cancelled...' });
                    window.hide();
                }
            }
        ]
    });

the first

alert(firstInvalid.name);

gives the correct invalid text field,
The second

alert(firstInvalid.ownerCt.getId());

gives the correct id for the panel which is under that tab itself, though when i set the focus on this it doesnt change onto the tab.
The third alert

alert(firstInvalid.findParentByType('tabpanel').ownerCt.getId());

gives the name of the the form panel.

I know the answer is more likely than not very simple, but for the life of me i havent been able to figure it out! Does anyone have any ideas?

Thanks

[Animal]

You need findParentBy()

And ask it to find a parent which is a direct child of a TabPanel...

Ext.extend(Ext.Component, {
    isDirectChildOfTabPanel : function() {
        return (this.ownerCt && (this.ownerCt.isXType('tabpanel')));
    }
});

[finch]

{
                text: 'Save',
                handler: function() {
                    if (fs.getForm().isValid()) {
                        fn_saveRecord();
                    }
                    else {
                        firstInvalidField = fs.getForm().items.find(function(f) { return !f.isValid(); });

                        if (firstInvalidField) {
                            ParentTab = firstInvalidField.findParentByType('tabpanel');
                            TabPanel = firstInvalidField.findParentByType('panel');
                            ParentTab.activate(TabPanel.getId());
                        }
                        Ext.MessageBox.alert('Validation Failed', 'Please ensure that all fields contain valid values.');
                    }
                }

            }

That works....


Thanks for all the help animal

[Animal]

That will work. Until you use a Panel at a lower level to encapsulate some fields.