1. #1
    Ext User
    Join Date
    Jan 2010
    Posts
    7
    Vote Rating
    0
    yugho is on a distinguished road

      0  

    Default Issue with panel collapse

    Issue with panel collapse


    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..

    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]
                });

  2. #2
    Ext User
    Join Date
    Apr 2009
    Posts
    18
    Vote Rating
    0
    dzwillia is on a distinguished road

      0  

    Default


    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.?

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    20
    Vote Rating
    0
    hhanna is on a distinguished road

      0  

    Default Make sure you're not overriding the css

    Make sure you're not overriding the css


    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.
    Last edited by hhanna; 10 Feb 2010 at 12:54 PM. Reason: additional info

  4. #4
    Ext User
    Join Date
    Jan 2010
    Posts
    7
    Vote Rating
    0
    yugho is on a distinguished road

      0  

    Default


    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..

Thread Participants: 2