View Full Version : Container.doLayout renders hidden elements too, leaving strange spaces in the ct

18 Feb 2010, 4:10 AM
I am not sure whether this is a bug introduced in revision 6014, or it is intentional. But due to changed functionallity, my usecase is now screwed up.

I have a hbox container with some form elements. Depending on a checkbox inside the container some of the elements should disappear/appear. The rest of the elements used to rearrange on a doLayout so the space in the container was always filled up nicely.

It used to work peachy when I was hiding the unwanted elements and calling the containers doLayout, but as of revision 6014 the hidden elements keeps occupying their space.

I have traced the problem to revision 6014 that changed Container.getItems() which ignored hidden elements to a Container.getRenderedItems() which returns all rendered items whether or not they are visible.

Here is a simplified testcase of my problem:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->

<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

var MyContainer = Ext.extend(Ext.Container, {
layout: 'hbox',
style: 'padding:5px',
constructor: function(config){
MyContainer.superclass.constructor.call(this, config);

xtype: 'textfield',
ref: 'myField1',
flex: 2,
value: 'Field1'
xtype: 'textfield',
ref: 'myField2',
flex: 1,
value: 'Field2'
xtype: 'checkbox',
listeners: {
scope: this,
check: function(elem, checked){ // toggle hide/show of field2
if (checked){
} else {
this.doLayout(false, true); // this made myField1 fill up the entire width, because myField2.isVisible() = false (until revision 6013)


new Ext.Window({
width: 300,
height: 65,
items: [
new MyContainer({})

}); //end onReady

If it IS a bug, please notify me, so I can fill in a bugreport and get my old functionallity back. Otherwise I would appreciate any help to obtain the same functionallity in another way.


18 Feb 2010, 5:32 AM
The two functions I think are responsible for the changed functionality are ofcourse:
BoxLayout.getItems() that was deleted in rev6014, and
ContainerLayout.getRenderedItems() that was introduced in rev6014.

getRenderedItems ignores visibility, where getItems did not.

This is a snippet of the diff between rev6013 and re6014:
+ // private.
+ // Get all rendered items to lay out.
+ getRenderedItems: function(ct){
+ var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = [];
+ for (i = 0; i < len; i++) {
+ if((c = cti).rendered && this.isValidParent(c, t)){
+ items.push(c);
+ }
+ };
+ return items;
+ },
- getItems: function(ct){
- var items = [];
- ct.items.each(function(c){
- if(c.isVisible()){
- items.push(c);
- }
- });
- return items;
- }

...and if I change line 3 in getRenderedItems from (space inserted to avoid forum italic code):
[I]if((c = cti[ i]).rendered && this.isValidParent(c, t)){
if((c = cti[ i]).rendered && this.isValidParent(c, t) && c.isVisible()){

everything works fine again (But that is of course an undesirable fix).

Ian Young
1 Jul 2010, 6:54 AM
I have the same problem (a toolbar that shows/hides a field based on other activity will always show the field on doLayout())

1 Jul 2010, 7:08 AM
Could this be an instance of http://www.sencha.com/forum/showthread.php?98854-FIXED-945-3.2.X-HBox-VBox-layout-issue-with-Hidden-fields ?

1 Jul 2010, 10:20 AM
I will check it out first thing tomorrow! :-)
Thanks for you answer.

2 Jul 2010, 5:06 AM
First of all, I didn't really succeed in getting Ext3.3 up and running, so I have only snooped around in the source files, and based my preliminary conclusion on that. I might be wrong, but I do not think that my problem is solved in Ext3.3

It seems that containerLayout.getRenderedItems has got a new clause stating that the property shouldLayout has to be true. But the only places I have found that property is in Ext.form.Hidden, Ext.layout.ContainerLayout and Ext.layout.BoxLayout and I can not see that it has anything to do with the hiding/showing of the component.

I would have expected that either c.isVisible() === true for a component to get pushed in the return array of getRenderedItems(), or maybe alternatively that shouldLayout would be set to false, when a component is hidden.

Unfortunately neither of those alternatives seems to happen in Ext3.3 :-(