Results 1 to 7 of 7

Thread: TabPanel Confirmation Promt Issue

  1. #1
    Sencha User sideeque's Avatar
    Join Date
    Aug 2009
    Location
    Washington DC
    Posts
    50

    Question TabPanel Confirmation Promt Issue

    I have tabPanel with 3 Tabs in it.

    Code:
     var tabParentPanel = new Ext.TabPanel({
            renderTo: "pageContent",
            id:'tabParentPanel',
            title: 'Main Panel',
            activeItem:'tab1',
            width: 960,
            items:[tab1,tab2, tab3],
            frame: true
        });
    
    Also it has an event shown as below...
    
    tabParentPanel.on('beforetabchange',checkTabChange);
    
    
    
        function checkTabChange()
        {
            var tab1 = Ext.ComponentMgr.get('tab1');
            var mes = "You have unsaved changes on the screen. Please click OK to stay on the current page and save. Click Cancel to discard your changes and go to the next tab.";
            if (!tab1.rendered) {
                return;
            }
            if (Ext.ComponentMgr.get('tabParentPanel') != null)
            {
                var currentTab = Ext.ComponentMgr.get('tabParentPanel').activeTab;
                            if (checkFormIsDirty(currentTab))
                            {
                                        /*Ext.MessageBox.confirm("Confirm Message", mes, function(btn){
                                                        if (btn == 'yes'){
                                                        return false;
                                                    } else {
                                                   return true;
                                                        }
                                                });*/
                                var r=confirm(mes);
                                        if (r==true){
                                            return false;
                                        } else {
                                            return true;
                                        }
                }
            }
        }
    The above code works fine with Javascript confirmation box. but it doesn't work with the above commented(RED colored) code of ExtJS Confirmation box.

    Is there anyway to make it work with ExtJs Confirmation box itself?
    Last edited by Animal; 8 Jan 2010 at 2:23 PM. Reason: USE CODE TAGS!

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    READ the code.

    Really read it.

    Step through it in your mind.

    WHAT FUNCTION returns true/false?

    Is it checkTabChange? Really?

  3. #3
    Sencha User sideeque's Avatar
    Join Date
    Aug 2009
    Location
    Washington DC
    Posts
    50

    Default

    I am in tab1.... Somehow made it as dirty.
    If the Tab1 is dirty, I need user get confirmation before going to Tab 2. if user click NO, I want to stay in Tab1 itself instead of going tab2

    By Using ExtJs Confirmation box, when user clicks tab2, Confirmation box comes, but irrespective of whether Yes or No clicked, Tab 2 is getting displayed all the time. its not waiting for user response.

    When I use noraml javascript confirmation, this works fine.

  4. #4
    Sencha User sideeque's Avatar
    Join Date
    Aug 2009
    Location
    Washington DC
    Posts
    50

    Default

    Below are my Panels which included in Tab Panel

    var tab1 = new Ext.Panel({
    id:'tab1',
    title:'Function',
    autoHeight:true,
    listeners:{
    deactivate:function(){},
    activate: function(){showTab1(tab1)},
    beforeDestroy:function(){},
    beforehide:function(){
    }
    },
    contentEl:'tab1El'
    });


    var tab2 = new Ext.Panel({
    id:'tab2',
    title:'Manage',
    autoHeight:true,
    listeners:{
    deactivate:function(){},
    show:function(){showTab2(tab2)},
    beforehide:function(){//setLastActiveTab(tab1)
    }
    },
    contentEl:'tab2El'
    });

    var tab3 = new Ext.Panel({
    id:'tab3',
    title:'Service',
    autoHeight:true,
    listeners:{
    deactivate:function(){},
    show:function(){showTab3(tab3)},
    beforehide:function(){
    }
    },
    contentEl:'tab3El'
    });

  5. #5
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327

    Default

    The first code you posted was enough to see the issue, you should indeed follow the execution of your code and see what is executed when.

    The third parameter you send to Ext.MessageBox.confirm is, according to the docs, a callback. If you still can't see the error knowing that, read up on what a callback is and reread.

    The questions you have to try and answer are: Wich function should return true/false to either change tab or not and wich function actually does?

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Common mistake. Read this thread.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    This is an important part of your Javascript career.

    For anyone to post a piece of code to "just do it" would be to shortchange you.

    Learning to read your code, and "see" when the code executes is an absolutely crucial skill.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •