PDA

View Full Version : getWidth() BorderLayout problem



Daniels
16 Sep 2009, 11:59 AM
I'm using a Panel with a BorderLayout. When I set the center panel, the getWidth() works fine, but when I set other panel, with a width = 50%, the getWidth() returns this message:


this.getResizeEl() is undefined


Why he doesn't recognize the 50% width value?

Jack9
16 Sep 2009, 2:48 PM
If you could provide some code (for example what region the second panel is assigned to), I would be willing to give it a shot.

Daniels
16 Sep 2009, 5:58 PM
If you could provide some code (for example what region the second panel is assigned to), I would be willing to give it a shot.

This code is used to center region


owner.add(newPanel);
owner.doLayout();This code is used to other regions


newPanel.region = region //region is a non-center region defined by user
newPanel.width = "50%"
newPanel.height = "50%"
owner.add(newPanel);
owner.doLayout();Both codes pass by a method which contains getWidth() of newPanel. The first running ok, the second throw the error I've posted in first post.

makana
16 Sep 2009, 9:34 PM
Hey Daniels,

It's not possible out of the box to specify relative widths to border layouts. It has to be a number which specifies the width in pixels.

But maybe this festure request (http://www.extjs.com/forum/showthread.php?p=287261#post287261) and the solution provided by Condor will help you.

Daniels
17 Sep 2009, 3:54 AM
Hey Daniels,

It's not possible out of the box to specify relative widths to border layouts. It has to be a number which specifies the width in pixels.

I changed the following lines, but the result is the same:


newPanel.height = owner.height/2;
newPanel.width = owner.width/2;Well, after this I tried don't set width and height... Also don't work, same message of the first post.

makana
17 Sep 2009, 4:06 AM
Seems like you call

panel.getWidth()
before it is rendered?

this.getResizeEl() returns this.resizeEl || this.el. Both are not available before the component is rendered.

btw, use


newPanel.width = owner.getWidth();
newPanel.height = owner.getHeight();

assuming, that newPanel is a config object, not a panel instance. And assuming, that owner is rendered ;)

Daniels
17 Sep 2009, 5:52 AM
Seems like you call

panel.getWidth()before it is rendered?

this.getResizeEl() returns this.resizeEl || this.el. Both are not available before the component is rendered.

I start to think this, too. Maybe doLayout() don't work how I supposed thought.


btw, use


newPanel.width = owner.getWidth();
newPanel.height = owner.getHeight();
assuming, that newPanel is a config object, not a panel instance. And assuming, that owner is rendered ;)

This also don't work.

doLayout() is called before the getWidth(). This should be working =/

makana
17 Sep 2009, 6:11 AM
Maybe doLayout() doesn't have any effect to your app, because it doesn't have any effect, if the container is not rendered yet.
Simply said, doLayout skips the layout and render-methods in it, if the container isn't currently rendered.
doLayout() is more for recalculating the layout if it has been already rendered.

Can you show some more successional code, which shows, what you are trying to do.

Daniels
17 Sep 2009, 9:53 AM
Maybe doLayout() doesn't have any effect to your app, because it doesn't have any effect, if the container is not rendered yet.
Simply said, doLayout skips the layout and render-methods in it, if the container isn't currently rendered.
doLayout() is more for recalculating the layout if it has been already rendered.

Can you show some more successional code, which shows, what you are trying to do.

The code bellow add the panel in the owner. Owner exists in the window on the top of code. newPanel not been added yet.



if(owner.getLayout()['center'] == undefined) {
newPanel.region = 'center';
var pan = createFixedPanel(newPanel);
owner.add(pan);
owner.doLayout();
} else if(owner.getLayout()[region] == undefined && biggestComp.region == 'center') {
newPanel.region = region;
newPanel.height = owner.getHeight()/2;
newPanel.width = owner.getWidth()/2;
owner.add(newPanel);
newPanel.doLayout();
} else {
biggestComp.split(newPanel, region);
}

addButton(newPanel);
}Inside addButton, this line of code is executed:


calcRegionToolbarModal(btn, comp.getWidth());And here the error occurs.

makana
17 Sep 2009, 12:30 PM
Don't know what you want to achieve with that code. And how the addButton-function looks like.

But do I understand it right?

Owner exists in the window on the top of code
You define an Ext.Window on top of that given code? And then you call these functions?
Did you show the window already? Otherwise it is not rendered and I would recommend to create the newPanel before the window and simply place it in the items property.
Correct me if I'm wrong.

And I think, it should be

if(owner.getLayout()['center'] == undefined) {
newPanel.region = 'center';
var pan = createFixedPanel(newPanel);
owner.add(pan);
owner.doLayout();
} else if(owner.getLayout()[region] == undefined && biggestComp.region == 'center') {
newPanel.region = region;
newPanel.height = owner.getHeight()/2;
newPanel.width = owner.getWidth()/2;
owner.add(newPanel);
owner.doLayout();
} else {
biggestComp.split(newPanel, region);
}

addButton(newPanel);
}

Daniels
17 Sep 2009, 12:54 PM
Don't know what you want to achieve with that code. And how the addButton-function looks like.

But do I understand it right?

You define an Ext.Window on top of that given code? And then you call these functions?
Did you show the window already? Otherwise it is not rendered and I would recommend to create the newPanel before the window and simply place it in the items property.
Correct me if I'm wrong.



My explanations was bad, sorry. What i want to mean is the owner(Ext.Panel) exists on the browser when the code starts, but the newPanel don't.

addButton() add a button on the panel and works fine with other methods.



And I think, it should be

if(owner.getLayout()['center'] == undefined) {
newPanel.region = 'center';
var pan = createFixedPanel(newPanel);
owner.add(pan);
owner.doLayout();
} else if(owner.getLayout()[region] == undefined && biggestComp.region == 'center') {
newPanel.region = region;
newPanel.height = owner.getHeight()/2;
newPanel.width = owner.getWidth()/2;
owner.add(newPanel);
owner.doLayout();
} else {
biggestComp.split(newPanel, region);
}

addButton(newPanel);
}I set newPanel for try a new thing, owner was the original doLayout component. Owner doesn't work right, too.

makana
17 Sep 2009, 9:38 PM
To sum up:
addButton adds a Button to the given panel (newPanel in that case)?
And addButton works if

newPanel.region = 'center';
var pan = createFixedPanel(newPanel);
owner.add(pan);
owner.doLayout();
is called before?
And addButton throws an error if

newPanel.region = region;
newPanel.height = owner.getHeight()/2;
newPanel.width = owner.getWidth()/2;
owner.add(newPanel);
owner.doLayout();
is called before?
Right?

So it would be nice to know, how your addButton function looks like, how your newPanel object looks like before that if statement becomes called and what your createFixedPanel function does and how it looks like. So post a complete testcase please!
Seems that your newPanel object isn't a valid config object and createFixedPanel uses it to create a valid panel...