Help with ViewPort / Coolite Panel / IFrame

Hi Coolite Team,

I am trying to test ViewPort to replace my current version that is using ExtExtenders.
It is working fine when using with CooliteManager / ScriptContainer.

My problem is to render the controls inside the CentralPanel (IFrame) using all its space height=100% and width=100%. No matter if I am using CoolPanel with AutoLoad or iframe, when I place a control inside the iframe and set its height to 100% it simply does not fill the frame height space.

I tried with no luck using Ext.query("*[class=x-panel-body]") to get the size of the frame (px) and manually set the table or div inside the frame. Is there a way to get the iframe height value?

Without this I can never have a fluid layout and it is very important to me.

Can anyone help me on this?

Thanks

PS: Please find example attached.

Leonardo.

Hi Leonardo,
try this script

Code:

---

<script type="text/javascript" language="javascript">       
            Ext.onReady(function(){
                var viewport = new Ext.Viewport({
                layout: 'border',
                items:[
                {
                  region: 'north',
                  contentEl: 'NorthPanel',
                  title: '',
                  split:true,
                  width: 200,
                  minSize: 50,
                  maxSize: 400,
                  collapsible: false
                },
                {
                  region: 'west',
                  contentEl: 'WestPanel',
                  title: 'Explorer',
                  split:true,
                  width: 200,
                  minSize: 50,
                  maxSize: 400,
                  collapsible: true
                },
                {
                  region: 'center', 
      id:'center',
      contentEl: 'CenterPanel',
                  title: 'Content',
                  minSize: 100,
                  collapsible: false,
                  margins:'0 0 0 0'
                },
                {
                  region: 'south',
                  contentEl: 'SouthPanel',
                  title: '',
                  minSize: 100,
                  collapsible: false,
                  margins:'0 0 0 0'
                }
                ]
              });
     
    Ext.getDom('CenterPanel').style.height = Ext.getCmp('center').getEl().getComputedHeight();
              });                 
           
               
        </script>

---

Leonardo,

For note:

Standart ExtJS ViewPort doesn't work with ASP.NET (postbacks don't occurs). I wrote class which fixes this problem. See

http://extjs.com/forum/showthread.php?t=14261

P.S. Very soon will be 0.5 release which contains ViewPort and ExtJS layouts

Hi Vladsch,

Thanks a lot for your answer, specially for anticipate a problem I would certainly spent hours without solve. God bless you !

The problem is that I still not accomplish it, sorry to say.
If you try put the example you sent me (http://forums.ext.net/showthread.php?postid=418.aspx) inside this ViewPort you will see that it does not work.

Remember I asked how to set TabHeight in percent?
The tab is never setted, because the containers inside the frame seems not work with % when inside the frame.

I spent my whole day again, without success, trying to accomplish it.
Thanks a lot for your example. It really works if I put:

Code:

---

Ext.getDom('CenterPanel').style.width = Ext.getCmp('center').getEl().getComputedWidth();

---

but I could not get this value on the page that is been opened inside the frame on scr property.

The closest I got from the solution is including just below the lines you sent me something like:

Code:

---

window.frames[0].document.getElementsByName('TabPanel1')[0].style.height = Ext.getCmp('center').getEl().getComputedHeight() + 'px';

---

It was just a test, because I notice that it runs first the child page, so I need to set it on the parent page.

Please, can you help me to get it done?
I think it is a good example to put in your Sandbox.

Really appreciate all your support.
Thanks.

Leonardo.

Dear Vladimir/Coolite team:


OK, I've done my best to accomplish a fluid layout using TabPanel on IE & FF.
I am sending a new version with everything working on FF. On IE almost everything apart from tabpanel auto-adjust on west panel collapse, but to make it work on IE I needed to put another script (on the main/parent page) to correct the frame problem and it seems to mess up FF. So it's commented out in the files I am sending.
The code I am sending here, is a mixing of your solution to make TabPanel works in percentage and other major changes I've done. Can you please have a look on this, that it will make more sense than try explain in words?


I've seem many threads saying that most of problems related to width / height in percentage are already corrected on version 0.5.


I've also seen people using some beta version of version 0.5. And people struggling with similar problems.


http://forums.ext.net/showthread.php...d=455-4-1.aspx
Coolite Control Version: 0.5.0.1666


http://forums.ext.net/showthread.php?postid=420.aspx


I am willing to test any beta version, report bugs or anything to have a new version.
As many people in this comunity I am fascinated by the power of ExtJs and the amazing job you guys are doing. But my commom sense said that I should try getting a new version instead of keep struggling with errors that are already corrected in a much more elegant manner.


As Geoffrey McGill asked me once before, and I've done in the past, I can report in detail any bug in order to help you guys.


I am not interested in Design mode, although I know it is a plus and it's very interesting. I know you guys are endeavour to finish this design mode support, but I don't think it is so important that justify such delay in the version release in order to have it done. It just my personal opinion, as Geoffrey McGill asked before how important we consider the design mode.


Looking forward to "hear" from you some good news ! :-)




Best regards,
Leonardo.

Hey folks,

Forgive my ignorance, but while I was typing my last message I came out with a solution to solve the problem on IE as well.

On the code I sent, just removing that old line used to adjust the frame size:

Code:

---

Ext.getDom('CenterPanel').style.height = Ext.getCmp('center').getEl().getComputedHeight();


Ext.getDom('CenterPanel').style.width = Ext.getCmp('center').getEl().getComputedWidth();

---

Anyway, keep it here just as a history for whom experience the same issue.
Now, I just need trying the Vladimir's solution to solve the posback problems using Viewport.

Also, I found fair to rectify my statement about what do I think about Design Mode. So, for that I'll post a new thread at the right discussion.


Thanks again. Looking forward to see 0.5 version, even a beta version.


Leonardo.

Hi Leonardo,

Send me an email (geoff [at] coolite [dot] com) and I will send you the latest 0.5 build.