1. #1
    Ext User
    Join Date
    Nov 2008
    Location
    Cape Town South Africa
    Posts
    14
    Vote Rating
    0
    finch is on a distinguished road

      0  

    Default Help Setting Active Tab On Invalid Validation

    Help Setting Active Tab On Invalid Validation


    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:


    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

    Code:
    alert(firstInvalid.name);
    gives the correct invalid text field,
    The second

    Code:
    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

    Code:
    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You need findParentBy()

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

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

  3. #3
    Ext User
    Join Date
    Nov 2008
    Location
    Cape Town South Africa
    Posts
    14
    Vote Rating
    0
    finch is on a distinguished road

      0  

    Thumbs up


    Code:
    {
                    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

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

Thread Participants: 1