PDA

View Full Version : Render a panel to a large table cell... monitor resize of table cell



mjaomaha
13 Apr 2010, 7:55 AM
This may be simple, but I seem to hit a few snags... Here is what I need to do.

I have just a standard html page who's layout is a table with relative width and height of 100%, and each row and table cell may have relative width and height of 70%/30%, or 15%/85%, or whatever. I would like to render a panel to one of those cells, which is easy enough, but unfortunately I have to give the panel an absolute width and height, but I want the panel to calculate the width and height of the table cell, and just render to that size (if possible).

the second requirement is that if the browser window is resized, the panel should resize to continue to be the size of the cell it was placed in.

Other than just using the renderTo property on the panel and giving the table cell an id, what else do I need to accomplish this?

Thanks for any help in advance.

Matt

mjaomaha
13 Apr 2010, 1:11 PM
Ok, I've been working with a little bit, and I notice that if I leave the width attribute undefined, the panel will automatically adjust to the width, even when the page is resized. This is not due to the panel listening to a page resize event, but is simply because the div width of the panel is undefined, and flows to fit the with of its container due to the way html works. The height however doesn't adjust. Here is the html...



<table class="sample">
<tr>
<td id="1" width="30%"></td>
<td id="2" width="70%">
<table class="sample">
<tr height="30%"><td id="3"></td></tr>
<tr height="70%"><td id="4">
<table class="sample">
<tr height="30%"><td id="5"></td></tr>
<tr height="70%"><td id="6"></td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>


If I wanted to render a panel to the cell with id=1, I can have this code...



var myPanel = new Ext.panel({
renderTo: "1",
height: 250,
//width: 150,
title: 'My Panel',
frame: true
});




Notice the width is commented out. When it is commented out, it will automatically conform to the width of the table cell it is rendered in. The height however CANNOT be commented out. The render() function does not look at the height of the div or table cell to figure that out. As sort of a work around, I found I can do this... but it does not handle the resize of the page...




var area = Ext.get("1");

var height = area.dom.clientHeight;




var myPanel = new Ext.panel({
renderTo: "1",
height: height,
//width: 150,
title: 'My Panel',
frame: true
});






I would think that Extjs would actually provide more functionality for rendering to a div. Am I missing something?

mjaomaha
14 Apr 2010, 7:43 AM
I'm reading through the source code for Component, Container and Panel, and this is what I'm finding...
When you set a "renderTo", the panel gets an attribute called this.container, which is the Ext Wrapper for the dom element surrounding it. Also, if I set "monitorResize=true", whenever the browser is resized, the doLayout function gets called. This still does not resize the component to the size of the "this.container" however. Hoping there is a truly knowlegable ExtJs source out there before I have to write a new solution by extending the Panel....