Results 1 to 1 of 1

Thread: panel.removeAll does not cleanup the DOM

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    13

    Default panel.removeAll does not cleanup the DOM

    Code:

    Sencha Touch version tested:
    • 1.0.3
    • 1.2.0-alpha-20110920

    • only default ext-all.css
    Platform tested against:
    • iOS 5.0
    • Android 2.3
    • MacOS + Safari 5.1.1
    Description:
    • I am trying to make a component that changes its layout depending on device orientation (if the device is in portrait mode, display some information using a vbox layout, if the device is in landcape, use a hbox layout). As it does not seem possible to dynamically change the layout of a panel, I do construct two panels, one for each orientation, and display the appropriate one depending on current device implementation.Some test code is shown below but leads to some garbaged screen. Console logs tend to confirm that switching is done correctly (panel items count is correct) however some elements are visible in the DOM while they are not supposed to be.Furthermore, size of component does not seem to propagate correctly (this may be a bug in my code as I am not yet very experienced with Sencha Touch and don't fully understand the difference between doLayout and doComponentLayout and what they actually do).
    Test Case:
    Code:
    var rootPanel, landscapePanel, portraitPanel;
    
    
    Ext.setup({
        onReady: function() {
    
    
            var red = {
                style: "background-color: #B22222; color:white;",
                title: "Red",
                html: "Red"
            };
    
    
            var amber = {
                style: "background-color: #FFBF00; color:white;",
                title: "Amber",
                html: "Amber"
            };
    
    
            var green = {
                style: "background-color: #3B7E00; color:white;",
                title: "Green",
                html: "Green"
            };
            landscapePanel = new Ext.Panel({
                layout: {
                    type: 'hbox',
                    align: 'stretch',
                    pack: 'start'    // try start [default], center or end.
                },
                defaults: {flex: 1},  // alternatively, apply flex to each inner item
                items: [],
                dockedItems: []
            });
            portraitPanel = new Ext.Panel({
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'start'    // try start [default], center or end.
                },
                defaults: {flex: 1},  // alternatively, apply flex to each inner item
                items: [red,amber,green],
                dockedItems: []
            });
            rootPanel = new Ext.Panel({
                fullscreen: true,
                layout: 'fit',
                monitorOrientation:true,
                items: [portraitPanel],
                dockedItems: [],
                updateOrientation: function(orientation,w,h)
                {
                  console.log("== updateOrientation:"+orientation+" ==");
                  if(orientation==="portrait" && portraitPanel.items.length==0) {
                      console.log(portraitPanel);
                        landscapePanel.removeAll(false);
                        rootPanel.removeAll(false);                    
                        portraitPanel.add([red,amber,green]);
                        rootPanel.add(portraitPanel);
                        rootPanel.doLayout();
                        portraitPanel.doComponentLayout();
                  }
                  else if (orientation==="landscape" && landscapePanel.items.length==0)
                  {
                      console.log(landscapePanel);
                      portraitPanel.removeAll(false);
                        rootPanel.removeAll(false);                    
                        landscapePanel.add([red,amber,green]);
                        rootPanel.add(landscapePanel);
                        rootPanel.doLayout();
                        landscapePanel.doComponentLayout();
                  }
                },
                listeners: {
                    beforeorientationchange: function(me,orient,n_w,n_h) {
                        console.log("== beforeorientationchange ==");
                        me.updateOrientation(orient,n_w,n_h);
                    }
                }
            });
        }
    });
    See this URL : http://barsentrans.newlc.com/test/orientation

    Steps to reproduce the problem:

    • point to the url above with your device in portrait mode
    • rotate the device so that display switches to landscape
    • do a few more orientation switch
    The result that was expected:
    • display switches between hbox and vbox layouts and panels are correctly resized
    The result that occurs instead:
    • some elements are not cleaned and visible in the DOM despite Ext panels do not seem to contain them anymore
    • child panels in the hbox and vbox are not always correctly resized
    • seem to work for landscape mode only after two orientation switches
    Screenshot or Video:
    • attached (taken from safari)
    Debugging already done:
    • none
    Possible fix:
    • I wish I had one!
    Attached Images Attached Images

Posting Permissions

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