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,501
    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,501
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi