Consecutive expand and collapse on a panel causes a script error.

**thelittleprince** · 21 Dec 2011 6:57 PM

I think this is a bug.

When I expand() and collapse() a panel consecutively (programatically and using mouse clicks on the collapse/expand button),

I get the following script error:

IE9:
Unable to get value of the property 'style': object is null or undefined

Code:

return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);

ext-all-debug.js, line 8256 character 21

which causes the panel to be disabled somehow (the title disappears and the collapse button disappears), after which the panel can no longer be expanded or collapsed.

FF8:
el is null

Code:

out = (v = el.style[prop]) ? v :

ext-all-debug.js, line 8216

but this does not lead to the panel being practically disabled as in IE9 so in FF8 I can still continue to expand and collapse.

Even after making the panel empty (because I thought the child components that were causing it), I experience the same thing. It takes about 2-10 expand/collapse sequence to duplicate it. It is a lot easier (a lot fewer clicks) to duplicate in IE than in FF.

This is how the panel is created (this, even, has been simplified to make sure it is not a config issue):

Code:

        aPanel=Ext.create('Ext.panel.Panel',{
        title:'Title',
        region:'east',
        width:300,
        collapsible:true,
        collapsed:true
        });

Can anyone verify this behavior? And more importantly, can anyone suggest a work around?

Thanks!

**mitchellsimoens** · 21 Dec 2011 7:58 PM

I tried in 4.0.7 and 4.1.0 with IE9, FF8 (Mac) and Chrome 16 (Mac) and I cannot reproduce. I tried clicking slow and fast but still cannot reproduce.

**scottmartin** · 21 Dec 2011 7:59 PM

I do not have IE9, so I cannot comment. I have tried on FF8 on Linux / Windows and IE8.

Do you get the behavior you expect using the following:

http://jsfiddle.net

-Select ExtJS 4.07
-Paste the following code into the HTML region
-Click RUN

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MultiSorting Grid Example</title>
    <link rel="stylesheet" type="text/css" href="http://docs.sencha.com/ext-js/4-0/resources/css/app.css">
    <script type="text/javascript" src="http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js"></script>
    <script type="text/javascript">

Ext.onReady(function() {
    Ext.QuickTips.init();

        aPanel=Ext.create('Ext.panel.Panel',{
        title:'Title',
// region: 'east',
        width:300,
        renderTo: 'grid',
        height: 300,
        html: 'This is a panel',
        collapsible:true,
        collapsed:true
        });        
        
});

    </script>
</head>
<body>
    <h1>Example</h1>
    <div id="grid"></div>
</body>
</html>

Regards,
Scott.

**mitchellsimoens** · 21 Dec 2011 8:10 PM

I don't have IE8 but I do have IE6 which if there is going to be a browser to reproduce, I would thin kit would be it but I still got no JS errors.

**thelittleprince** · 22 Dec 2011 12:25 AM

Thanks for the responses.

When I posted it first, I didn't think of doing it on a clean example. Sorry. When I did I could not reproduce it. So I'm just confirming what you all have said.

There must be something else in our application that is causing it. I see the behavior I reported in multiple panels (even on an empty one) and it is really triggered by the collapse and expansion of the panels.

If I figure out what it is I might just post it here for the record (whether it is a bug or not).

Also for the record, I am using 4.02a.

Thanks for all your help!

Happy holidays!

Norman

Consecutive expand and collapse on a panel causes a script error.

Thread Tools

Search Thread

Display

Consecutive expand and collapse on a panel causes a script error.

Consecutive expand and collapse on a panel causes a script error.

Tags for this Thread