Issue with panel collapse

[yugho]

Dear all,

I wish to use panel which can be collapsed, but when there's other component below the panel, the panel will collapse but there's still blank page left.
How to get rid of this problem? Thanks.
Below is my code..

var panel1 = new Ext.form.FormPanel({
                title : 'Jumping fields',
                collapsible : true,
                padding : 10,
                items : [{
                            fieldLabel : 'Text Field',
                            xtype : 'textfield'
                        }, {
                            fieldLabel : 'ComboBox',
                            xtype : 'combo'
                        }, {
                            fieldLabel : 'Text Area',
                            xtype : 'textarea'
                        }]
            });

    var panel2 = new Ext.form.FormPanel({
                title : 'Jumping fields',
                collapsible : true,
                padding : 10,
                items : [{
                            fieldLabel : 'Text Field',
                            xtype : 'textfield'
                        }, {
                            fieldLabel : 'ComboBox',
                            xtype : 'combo'
                        }, {
                            fieldLabel : 'Text Area',
                            xtype : 'textarea'
                        }]
            });

    var allPanel = new Ext.Panel({
                renderTo : document.body,
                border : false,
                items : [panel1, panel2]
            });

[dzwillia]

It looks like you've copied the panel code from this thread. These panels collapse and expand properly. Could you please be more specific when you say "there's still blank page left". I pasted your code into Firebug and it worked fine for me.

Could you include some screenshots of expected and errant behavior, the version of Ext JS you're using, browser, etc.?

[hhanna]

Like dzwillia, I tested the code you posted and it works fine.

Make sure you're not overriding the css for the panel element. If you override the display and visibility settings on a collapsed panel, you'll end up with the "blank" space filling the area below the panel header. It isn't really blank, it could be an element with css "visibility: hidden" applied.

Oh yeah, and if you're new to development, the Firebug add-on for Firefox is invaluable. Likewise, Safari and Chrome have their own development tools for debugging code.

[yugho]

Thanks a lot dzwillia, hhanna
Your posts help me a lot. It appears that after I have "miframe" component included in the page, this problem occurs..... Thanks a lot.
I should find another way to solve this problem now.... Thanks thanks..