PDA

View Full Version : vbox doesn't show components; fit does



doom777
6 Aug 2009, 11:15 PM
Here is my task: I need to have a main center panel containing a grid. Above it, I need a special status panel. The status panel is composed of an actual panel with the status message, and a progress bar. Allow me to draw:

___________
| Reading.... <---status
|------|50% <---Progress
| Col a| Col b| <-- Grid
| 25% | -12%

The entire status panel, as well as its individual components (status and progress) can be added and removed dynamically

My problem, is that it doesn't render the status text when needed. The border for the main status panel shows up, but nothing inside is rendered. However it works when I use fit layout instead of vbox. Here is my code for declaration:


// Setup up inline message
this.msgTpl = new Ext.Template([
'<div id="waitDiv">',
'<span id="waitPic" class="waitPic {iconCls}" > </span>',
'<span id="waitStatus" cls="waitStatus" >{status}</span>',
'</div>'
]
);
this.stsMsg = new Ext.Panel({
cls: 'inlineMsgBox',
tpl: this.msgTpl,
height:25
});
Ext.apply(this.stsMsg,{
applyToTpl: function(config){ //shortcut method to re-render panel
this.initialConfig.tpl.overwrite(this.body,config);
},
reset: function(){
this.applyToTpl({});
}
});

this.progress = new Ext.ProgressBar({
animate: true,
});

Trailbender.StatusPanel.superclass.constructor.call(this, {
cls: 'statPnl',
id: config.id,
hidden: true,
layout:'vbox',
layoutConfig: {align:"stretch"},
region: 'north',
// border: false,
// hideBorders: true,
hideLabel: true,
items:[this.stsMsg,this.progress]
});

here is my code for showing it


displayMessage: function(text, iconCls, timeout){
this.show();
this.showInlineMsg();
this.stsMsg.applyToTpl({status: text,iconCls: iconCls});
if(timeout && timeout > 0){
this.hideInlineMsg.defer(timeout,this);
}
},

show: function(){
Trailbender.StatusPanel.superclass.show.apply(this);
this.ownerCt.doLayout();
},


// displays inline message
showInlineMsg : function(){
this.showComp(this.stsMsg);
},

/**
* Displays the component
* @param {ProgressBar/Panel} component to show
*/
showComp: function(component){
component.reset(); //both have this method
this.show();
component.show();
this.doLayout();
this.syncShadow();
},

11 Aug 2009, 4:21 AM
are you seting a flex value on stsMsg or progress ??

doom777
11 Aug 2009, 4:22 AM
neither. I don't want them stretched. I want them at natural height, one after another.

Condor
11 Aug 2009, 4:26 AM
What do you mean by 'natural height'?

Animal
11 Aug 2009, 4:28 AM
That's not a vbox layout then.

It's either simple ContainerLayout (no layout config), or, if you want managed widths, then anchor layout.

doom777
11 Aug 2009, 6:16 AM
Condor and Animal: I want the container's size to be determined by the children's heights.

The problem with no layout, is that when I set both components heights to auto, and the parent's height to auto, then the height of the parent is not the sum of its childrens heights, but the highest of its children. It is then too short.

It works if I set one of the components heights manually, but I don't want to do that since it can change.

Animal
11 Aug 2009, 7:14 AM
the height of the parent is not the sum of its childrens heights, but the highest of its children.

Not if it's managed by a size-managing layout itself. (eg part of a border layout).

If it has its height set, then you will need to allow scrolling of its content.

doom777
11 Aug 2009, 11:58 AM
So what layout do you suggest? Border is overkill especially since there is no center component. vbox would be perfect, since it's literally -- one component under the second one. Unfortunately, it doesn't show the components.

I am now realizing that my problem is that at time of render, the text is not yet there, so there is no height. I wonder how I could fix that.

Animal
11 Aug 2009, 12:59 PM
You can't use a height-sizing layout if you don't want the child items sized.

Use an anchor layout and anchor the widths of the Components.