Results 1 to 3 of 3

Thread: [4.1.3] Problem with visibility inside a layout

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    6

    Default [4.1.3] Problem with visibility inside a layout

    REQUIREDINFORMATION Ext version tested:
    • Ext 4.1 rev 3
    Browser versions tested against:
    • Chrome 23
    • IE9
    • FF17 (firebug 1.11.1 installed)
    Description:
    • Inside a panel with a vbox layout, if all items are hidden and have hideMode = visibility except for the last one, they don't gain the visibility: hidden style. The last item is placed as it's the first one. If i remove the layout property from the panel, the items will be placed correctly.
    Steps to reproduce the problem:
    • create a panel with some items hidden = true, hideMode = visibility and the last one must have hidden = false;
    • try to remove the layout property from the panel to see this works correctly
    The result that was expected:
    • the last item should be places after # spaces
    The result that occurs instead:
    • the last item is places as first element of the panel
    Test Case:
    Code:
    Ext.create("Ext.panel.Panel", {
        title: "MyPanel",
        width: 100,
       height: 200,
        layout: "vbox",
       items: [{
            xtype:"button",
            id:"button1",
            hideMode:"visibility",
            hidden:true,
            style: "margin:5px;",
            text: "Button1"
        }, {
           xtype: "button",
            id:"button2",
            hideMode:"visibility",
            hidden:true,
            style: "margin:5px;",
            text: "Button2"
        }, {
           xtype: "button",
            id:"button3",
            hideMode:"visibility",
            hidden:true,
            style: "margin:5px;",
            text: "Button3"
        }, {
           xtype: "button",
            id:"button4",
            hideMode:"visibility",
            hidden:true,
            style: "margin:5px;",
            text: "Button4"
        }, {
           xtype: "button",
            id:"button5",
            hideMode:"visibility",
            hidden:false,
            style: "margin:5px;",
            text: "Button5",
            handler: function() {
               if(Ext.getCmp("button1").isHidden() == true) {
                  Ext.getCmp("button1").show();
                   Ext.getCmp("button2").show();
                  Ext.getCmp("button3").show();
                   Ext.getCmp("button4").show();
               }
               else {
                   Ext.getCmp("button1").hide();
                  Ext.getCmp("button2").hide();
                   Ext.getCmp("button3").hide();
                  Ext.getCmp("button4").hide();
               }
               return;
            }
       }],
        renderTo:Ext.getBody()
    });
    HELPFULINFORMATION

    Screenshot or video:
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • OpenSuse 11.4
    • Win7 Pro

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    If you want to use "natural" flowing layout which takes this into account, do not use box layout.

    Box layout omits hidden components from its layout operation.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    6

    Default

    In my code, i use table layout and the result is the same as the example.

    I have some panels side by side and inside each of them i have some form fields.
    Each fields could be hide/show by users and i want to keep them horizontally aligned (to have the same field in the same row for all the panels).

    After rendering the page, with table layout, if i try to show an hidden field, it won't show.
    If i use a box layout, items will be shown.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •