4.1.1a Layout bug showing a message box from the beforeremove handler

**Werzi2001** · 19 Oct 2012 1:53 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.1a

Browser versions tested against:

Chrome
FireFox

DOCTYPE tested against:

Check test case

Description:

I have a tabpanel whose tabs can be closed by a toolbar button and by the default extjs close button
A message box should be shown on removing a tab (confirm message)

Steps to reproduce the problem:

Click on extjs close button within the tab => error occurs
Use toolbar remove button => error doesn't occur

The result that was expected:

Message box to be shown correctly

The result that occurs instead:

Layout of message box is destroyed

Test Case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
        <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all-gray.css"/>
        <script type="text/javascript" src="./extjs/ext-all.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            Ext.onReady(function() {
                var tabpanel = Ext.create('Ext.tab.Panel', {
                    renderTo: document.body,
                    width: 500,
                    height: 400,
                    items: [{
                        id: 'tab1',
                        title: 'Tab1',
                        closable: true,
                        tbar: [{
                            text: 'remove',
                            listeners: {
                                click: function (button, e, eopts) {
                                    tabpanel.remove(Ext.getCmp('tab1'));
                                }
                            }
                        }]
                    }, {
                        id: 'tab2',
                        title: 'Tab2',
                        closable: true,
                        tbar: [{
                            text: 'remove',
                            listeners: {
                                click: function (button, e, eopts) {
                                    tabpanel.remove(Ext.getCmp('tab2'));
                                }
                            }
                        }]
                    }],
                    listeners: {
                        beforeremove: function(tp, panel, eopts) {
                            Ext.MessageBox.show({
                                title: 'test',
                                msg: 'test',
                                buttons: Ext.Msg.OKCANCEL
                            });
                            return false;
                        }
                    }
                });
            });
        </script>
    </body>
</html>

**mitchellsimoens** · 19 Oct 2012 7:05 AM

Thanks for the report! I have opened a bug in our bug tracker.

4.1.1a Layout bug showing a message box from the beforeremove handler

Thread Tools

Search Thread

Display

4.1.1a Layout bug showing a message box from the beforeremove handler

4.1.1a Layout bug showing a message box from the beforeremove handler