Sencha panel not collapsing correclty

Question

Inside a tabpanel i have a panel with 'collapsible' = true.

When i click on the icon to expand nothing happens. Only when i change tabs and then return to the previous one does the expand event fires and the panel expands correctly. The same strange behavior happens when trying to collapse.

I build both tab panel and the panel dynamically.

This is how i build the tab panel:

HnBSenchaUIGeneratorClass.prototype.GenTabPanel = function (modelConfigData, targetId) {    var hnb = this;


var _layout = "auto";
if (modelConfigData.Layout) {
    _layout = (Ext.decode(modelConfigData.Layout, true) == null) ? modelConfigData.Layout : Ext.decode(modelConfigData.Layout, true);
} else {
    _layout = "auto";
}


var tabPanel = new Ext.create('Ext.tab.Panel', {
    title: modelConfigData.WindowTitle || modelConfigData.Title,
    layout: _layout,
    closable: false,
    autoScroll: true,
    activeTab: modelConfigData.ActiveTab || 0,
    tabPosition: modelConfigData.TabPosition || 'top',
    listeners: {
        beforetabchange: {
            fn: function (tabPanel, newCard, oldCard, eOpts) {
                //TODO: validar se isto não invalida ou interfere algum outro processo ou validação.
                newCard.suspendLayout = true;
            }
        }
    }
});


if (modelConfigData.ObjId != undefined) tabPanel["objId"] = modelConfigData.ObjId;


if (modelConfigData.BodyStyle != undefined) tabPanel["bodyStyle"] = modelConfigData.BodyStyle;
if (modelConfigData.Closable != undefined) tabPanel["closable"] = modelConfigData.Closable;
if (modelConfigData.Flex != undefined) tabPanel["flex"] = modelConfigData.Flex;


if (modelConfigData.Border != undefined) tabPanel["border"] = modelConfigData.Border;
if (modelConfigData.Style != undefined) tabPanel["style"] = modelConfigData.Style;
if (modelConfigData.Height != undefined) tabPanel["height"] = modelConfigData.Height;
if (modelConfigData.Width != undefined) tabPanel["width"] = modelConfigData.Width;
if (modelConfigData.Defaults != undefined) tabPanel["defaults"] = modelConfigData.Defaults;
if (modelConfigData.Margin != undefined) tabPanel["margin"] = modelConfigData.Margin;
if (modelConfigData.Padding != undefined) tabPanel["padding"] = modelConfigData.Padding;
if (modelConfigData.Property != undefined) tabPanel["dataField"] = modelConfigData.Property;
if (modelConfigData.Anchor != undefined) tabPanel["anchor"] = modelConfigData.Anchor;
if (modelConfigData.Rowspan != undefined) tabPanel["rowspan"] = modelConfigData.Rowspan;
if (modelConfigData.Colspan != undefined) tabPanel["colspan"] = modelConfigData.Colspan;
if (modelConfigData.Disabled != undefined) tabPanel["disabled"] = modelConfigData.Disabled;


var obj;
Ext.Array.each(modelConfigData.Items, function () {
    if (this.DontRender === undefined || (this.DontRender != true && this.DontRender.toString().toUpperCase() != "TRUE")) {
        switch (this.Type) {
            case "panel":
                obj = hnb.GenPanel(this, targetId);
                break;
            case "form":
                obj = hnb.GenForm(this, targetId);
                break;
            case "list":
                obj = hnb.GenGrid(this, targetId);
                break;
            case "CommandExecution":
                obj = CreateObjectByCommandExecution(this, targetId);
                break;
            default:
                break;
        }
        if (obj) {
            if (this.ObjId != undefined)
                obj["objId"] = this.ObjId;


            var SelfDisabled = false;
            if (this.SelfDisabled != undefined) {
                if (this.SelfDisabled == true) {
                    SelfDisabled = true;
                }
            }
            obj.SelfDisabled = SelfDisabled;


            if (this.Disabled != undefined)
                obj.disabled = (this.Disabled.toString().toUpperCase() === "TRUE");


            tabPanel.add(obj);
        }
    }
});
return tabPanel;

}

And this is how i create the panel:

HnBSenchaUIGeneratorClass.prototype.GenPanel = function (modelConfigData, targetId) {    var hnb = this;


var _layout = "auto";
if (modelConfigData.Layout) {
    _layout = (Ext.decode(modelConfigData.Layout, true) == null) ? modelConfigData.Layout : Ext.decode(modelConfigData.Layout, true);
} else {
    _layout = "auto";
}


var panel = new Ext.create('Ext.panel.Panel', {
    itemId: modelConfigData.ItemId,
    title: modelConfigData.WindowTitle || modelConfigData.Title,
    layout: _layout,
    closable: false,
    controlUrl: modelConfigData.ServiceURL
    //autoScroll: true
    //,border: modelConfigData.Border,
    //flex: modelConfigData.Flex
    //, bodyStyle: modelConfigData.BodyStyle //'background-color:green !important;'
});


if (modelConfigData.ObjId != undefined) {
    panel["objId"] = modelConfigData.ObjId;
    panel["itemId"] = modelConfigData.ObjId;
}


if (modelConfigData.Flex != undefined) panel["flex"] = modelConfigData.Flex;
if (modelConfigData.BodyStyle != undefined) panel["bodyStyle"] = modelConfigData.BodyStyle;
if (modelConfigData.Border != undefined) panel["border"] = modelConfigData.Border;
if (modelConfigData.Style != undefined) panel["style"] = modelConfigData.Style;
if (modelConfigData.Height != undefined) panel["height"] = modelConfigData.Height;
if (modelConfigData.Width != undefined) panel["width"] = modelConfigData.Width;
if (modelConfigData.Defaults != undefined) panel["defaults"] = modelConfigData.Defaults;


if (modelConfigData.Collapsible != undefined) panel["collapsible"] = modelConfigData.Collapsible;
if (modelConfigData.Collapsed != undefined) panel["collapsed"] = modelConfigData.Collapsed;
if (modelConfigData.Region != undefined) panel["region"] = modelConfigData.Region;
if (modelConfigData.Cmargins != undefined) panel["cmargins"] = modelConfigData.Cmargins;
if (modelConfigData.MinSize != undefined) panel["minSize"] = modelConfigData.MinSize;
if (modelConfigData.MaxSize != undefined) panel["maxSize"] = modelConfigData.MaxSize;




if (modelConfigData.Margin != undefined) panel["margin"] = modelConfigData.Margin;
if (modelConfigData.Padding != undefined) panel["padding"] = modelConfigData.Padding;
if (modelConfigData.Property != undefined) panel["dataField"] = modelConfigData.Property;
if (modelConfigData.Anchor != undefined) panel["anchor"] = modelConfigData.Anchor;
if (modelConfigData.Rowspan != undefined) panel["rowspan"] = modelConfigData.Rowspan;
if (modelConfigData.Colspan != undefined) panel["colspan"] = modelConfigData.Colspan;
if (modelConfigData.Disabled != undefined) panel["disabled"] = (modelConfigData.Disabled.toString().toUpperCase() === "TRUE");


addEvent(modelConfigData, panel);


var modelFields = [];
var panelFields = [];
Ext.Array.each(modelConfigData.Items, function () {
    var aux;
    if (this.DontRender === undefined || (this.DontRender != true && this.DontRender.toString().toUpperCase() != "TRUE")) {
        if (this.Type == "form") {
            aux = hnb.GenForm(this);
        }
        else {
            aux = hnb.CreateSenchaUIObject(this, panel, modelFields);
        }
    }


    if (aux) {
        panelFields.push(aux);
    }
});
panel.add(panelFields);


return panel;

}

Any ideas on why this is happening??

I'm using Sencha 4.1.2a.

Miguel Teixeira Miguel Teixeira · Accepted Answer · 2012-12-11T13:22:03

I found what was preventing both events.

In the creation of the tab panel i set up a listener for 'beforetabchange' where i did this: newCard.suspendLayout = true;

This is needed for another screen so i basically add an 'extra' var when i don't want to do the above. In the end it looks like this:

listeners: {
        beforetabchange: {
            fn: function (tabPanel, newCard, oldCard, eOpts) {
                if (tabPanel.enableSuspendLayout === true) {
                    newCard.suspendLayout = true;
                }
            }
        }
    }

Sencha panel not collapsing correclty

1 Answers