PDA

View Full Version : Panel collapse not working



Mteixeira
6 Dec 2012, 10:22 AM
Inside a tabpanel i have a panel with 'collapsible (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-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.

Any ideas on why this is happening??

I'm using Sencha 4.1.2a.

suzuki1100nz
6 Dec 2012, 10:51 PM
Please post your code or a code sample demonstrating the problem

Mteixeira
7 Dec 2012, 1:40 AM
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;
}

Mteixeira
11 Dec 2012, 5:22 AM
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; } } } }