Results 1 to 5 of 5

Thread: Collapsible panel throws exception on expand

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-26457 in 6.5.3.
  1. #1
    Sencha Premium User
    Join Date
    May 2015

    Default Collapsible panel throws exception on expand

    Create a collapsible panel and add it to the east region of a panel.

    Expand it and get the following error

    ext-all-debug.js:69120 Uncaught TypeError: Cannot set property 'hidden' of null
    at constructor.placeholderExpand (ext-all-debug.js:69120)
    at constructor.expand (ext-all-debug.js:68467)
    at constructor.toggleCollapse (ext-all-debug.js:69312)
    at Object.callback (ext-all-debug.js:5441)
    at constructor.onClick (ext-all-debug.js:64416)
    at (ext-all-debug.js:10124)
    at (ext-all-debug.js:15993)
    at constructor.publish (ext-all-debug.js:15958)
    at constructor.publishDelegatedDomEvent (ext-all-debug.js:15974)
    at constructor.doDelegatedEvent (ext-all-debug.js:16012)


    Occurs in 6.5.1 and 6.5.2 - can't create a 6.5.2 fiddle as it hasn't been updated yet

  2. #2
    Sencha - Support Team
    Join Date
    Sep 2017

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia


    There's no reason why the original fiddle should fail, you can't just change the code and say it's fixed!

    The problem is that the panel class has a null check for center in one place, but not another. This should fix the issue:

    Ext.define(null, {
        override: 'Ext.panel.Panel',
        placeholderExpand: function(animate) {
            var me = this,
                collapseDir = me.collapsed,
                expandTool = me.placeholder.expandTool,
                floatCls = Ext.panel.Panel.floatCls,
                center = me.ownerLayout ? me.ownerLayout.centerRegion : null,
                finalPos, floatedPos, readThis;
            // Layouts suspended - don't bother with animation shenanigans
            if (Ext.Component.layoutSuspendCount) {
                animate = false;
            if (me.floatedFromCollapse) {
                floatedPos = me.getPosition(true);
                // these are the same cleanups performed by the normal slideOut mechanism:
                me.floated = false;
            // We assume that if expand was caused by keyboard action on focused
            // placeholder expand tool, the logical focus transition is to the
            // panel header's collapse tool.
            // Note that it may not be the case when the user *clicked* expand tool
            // while focus was elsewhere; in that case we dare not touch focus to avoid
            // sudden jumps.
            if (expandTool && Ext.ComponentManager.getActiveComponent() === expandTool) {
                me.focusHeaderCollapseTool = true;
                // There is an odd issue with JAWS screen reader: when expanding a panel,
                // it will announce Expand tool again before focus is forced to Collapse
                // tool. I'm not sure why that happens since focus does not move from
                // Expand tool during animation; this hack should work around
                // the problem until we come up with more understanding and a proper
                // solution. The attributes are restored below in doPlaceholderExpand.
                expandTool._ariaRole = expandTool.ariaEl.dom.getAttribute('role');
                expandTool._ariaLabel = expandTool.ariaEl.dom.getAttribute('aria-label');
                expandTool.ariaEl.dom.setAttribute('role', 'presentation');
            if (animate) {
                // Expand me and hide the placeholder
                me.collapsed = false;
                // Stop the center region from moving when laid out without the placeholder there.
                // Unless we are expanding from a floated out situation. In that case, it's laid out immediately.
                if (center && !floatedPos) {
                    center.hidden = true;
                if (center && !readThis) {
                    center.hidden = false;
                if (!me.floatedFromCollapse) {
                    me.fireEvent('beginfloat', me);
                // At this point, this Panel is arranged in its correct, expanded layout.
                // The center region has not been affected because it has been flagged as hidden.
                // If we are proceeding from floated, the center region has also been arranged
                // in its new layout to accommodate this expansion, so no further layout is needed, just
                // element animation.
                // If we are proceeding from fully collapsed, the center region has *not* been relayed out because
                // the UI look and feel dictates that it stays stable until the expanding panel has slid in all the
                // way, and *then* it snaps into place.
                me.isCollapsingOrExpanding = 2;
                // Floated, move it back to the floated pos, and thence into the correct place
                if (floatedPos) {
                    finalPos = me.getXY();
                    me.setLocalXY(floatedPos[0], floatedPos[1]);
                    ], {
                        duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
                        listeners: {
                            scope: me,
                            afteranimate: function() {
                                var me = this;
                                me.isCollapsingOrExpanding = 0;
                                me.fireEvent('expand', me);
                                me.fireEvent('endfloat', me);
                } else // Not floated, slide it in to the correct place
                    me.placeholder.hidden = false;
                    // Slide this Component's el back into place, after which we lay out AGAIN
                    me.el.slideIn(me.convertCollapseDir(collapseDir), {
                        preserveScroll: true,
                        duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
                        listeners: {
                            afteranimate: me.doPlaceholderExpand,
                            scope: me
            } else {
                me.floated = me.collapsed = false;
            return me;
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #4
    Sencha Premium User
    Join Date
    May 2015


    Evant - thanks very much that seems to work and I shall use until a proper fix is created (assuming there is anyone left fixing bugs)

    Jaraj - thanks for the effort but like Evant says, you can't just make it do something else! There is a reason the panel was added to the desktop panel and not the viewport!!

  5. #5
    Sencha - Support Team
    Join Date
    Mar 2015


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

Similar Threads

  1. Replies: 5
    Last Post: 8 May 2015, 1:11 PM
  2. Replies: 11
    Last Post: 21 Feb 2014, 6:41 AM
  3. Replies: 1
    Last Post: 18 Jan 2014, 9:41 AM
  4. Replies: 2
    Last Post: 8 Jun 2012, 5:31 AM
  5. TreeNode.expand() throws exception
    By rilush in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 9 Nov 2011, 4:22 AM

Posting Permissions

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