Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#14533 closed defect (invalid)

BorderContainer does not resize properly when it is added programatically

Reported by: DB_baxter Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.7.1
Keywords: BorderContainer DataGrid Cc: dbrown@…
Blocked By: Blocking:

Description

Browser: Firefox
Browser Version: 6.0.2
OS: Windows XP, Service Pack 3

I have attached a small test application which may be used to reproduce this issue. You will need to extract the tar.gz file, preserving folder names.

The test contains two scenarios ("good" and "bad"); they are identical in terms of the widgets, configuration settings, and layouts that are used. Both scenarios include a DataGrid that is nested inside a series of BorderContainers; however, the manner in which the BorderContainers are loaded is different.

TestGridSizing_good.html renders the entire application when the page is loaded, whereas TestGridSizing_bad.html renders a parent BorderContainer first, and then loads a child BorderContainer in response to an onClick event.

Here are the steps to reproduce:

  1. Open /test/TestGridSizing_good.html and notice how the DataGrid expands to fill the available client area of the browser. This is the desired/correct behavior, given that the DataGrid's "region" attribute has been set to "center".
  2. Open /test/TestGridSizing_bad.html and allow the main toolbar to load.
  3. Click the edit button on the toolbar. This will load a child BorderContainer that includes the DataGrid.
  4. Notice how the BorderContainer does not automatically resize (vertically) to accommodate the entire DataGrid...only the headers are visible.

We have an application that uses a similar approach to loading content as shown in TestGridSizing_bad. This approach worked fine in Dojo 1.6.1; however, it no longer works in Dojo 1.7.1.

Attachments (1)

test.tar.gz (2.5 KB) - added by DB_baxter 8 years ago.
test case files

Download all attachments as: .zip

Change History (3)

Changed 8 years ago by DB_baxter

Attachment: test.tar.gz added

test case files

comment:1 Changed 8 years ago by bill

Resolution: invalid
Status: newclosed

Thanks for the test case and detailed instructions.

There are a number of problems with your test case that's preventing this to work. When they are fixed, it works.

First, you have this code in your test file that's invalid:

dojo.connect(editButton, "onClick", function() {
	contentPane.destroyDescendants();
	var gridWidget = new GridWidget();
	gridWidget.placeAt(contentPane.domNode);
	gridWidget.startup();
});

This is an invalid way to add/set the content of another widget. If contentPane was truly a ContentPane then the correct code would be:

contentPane.set("content", gridWidget);

But since in your test case contentPane is actually a BorderContainer, you first need to set a region on the child widget you are adding:

gridWidget.region = "center";

And then you can either do:

contentPane.addChild(gridWidget);

or a slight variation on what you had originally:

gridWidget.placeAt(contentPane);

The other issues are with GridWidget:

  1. It doesn't have a resize() method. This is necessary, to pass the resize() call on GridWidget to it's embedded BorderContainer widget
  2. It's illegal for a widget to have an embedded widget as it's root node.

So, I modified the template for GridContainer to have a wrapping <div>, and a data-dojo-attach-point for the BorderContainer:

<div>
	<div data-dojo-type="dijit.layout.BorderContainer"
                    data-dojo-attach-point="bc">
	     ...
	</div>
</div>

And then added a resize() method to GridContainer:

resize: function(size){
	this.bc.resize(size);
}

Then everything works, save for an issue where GridContainer and it's embedded BorderContainer are both getting a border.

Last edited 8 years ago by bill (previous) (diff)

comment:2 Changed 8 years ago by DB_baxter

Bill, thanks very much for the corrections. Some of those things you pointed out were unknown to me. I applied your suggestions to our application code, and everything works now.

Note: See TracTickets for help on using tickets.