Removing an item then updating view on orientation change etc

[simondavies]

I have thi sview laid out similar to below, but on orientation chaneg I would like to remove an item (panel) and have the page view refresh to compensate for this change.

My page is made up like:

var topPanel = new Ext.Panel({
        id: 'TopPanel',
        ......
        flex:1
    });
                
var btmPanel = new Ext.List({
        id: 'BtmPanel',
        .....
        flex:1
    });




App.views.myFirstView = Ext.extend(Ext.Panel, {
        id:'myView',
        dockedItems: [{.....}],
        items: [topPanel,btmPanel],
        ......        
});

Now I have the onOrientationChange function working, so what I would like to do is that within the main view ' myView' i currently have two items items: [topPanel,btmPanel].

When it detects that its in landscape mode I would like to hide/removed the topPanel, so I only have one item within the items section eg: items: [btmPanel], then it refreshed the view to show this change.

Now I can probably hide the top view (using css etc) but then as its a split view the bottom view shows and the top is hidden, but there is a gap at the top where this view was, I want to have it so the bottom view spans the whole height of the panel now.

And then when the user goes back to portrait it places the top view back etc.

I see some thing like doLayout(); and have tried this using this.doLayout(); but nothing happens.

have have the following added to my main panel:

      


App.views.myFirstView = Ext.extend(Ext.Panel, {
        id:'myView',
        dockedItems: [{.....}],
        items: [topPanel,btmPanel],
        ......,
        monitorOrientation: true,
        onOrientationChange: function(orientation, w, h){
             if(Ext.Viewport.orientation == 'portrait'){
                 display the two views...?
             } else {
                  remove the top view and make btm view full height....
             }
         }
            
});

But I cannot seem to find the right way within the if else statement to do this.

Any help or advise would be appreciated.
Thanks Si

[mitchellsimoens]

this.remove(cmp) will remove a component so when you are in landscape do that and if in portrait, create the view again and doLayout. What layout are you using on the wrapping Panel?

[simondavies]

thanks for the reply:

from your suggestion I have the following:

onOrientationChange: function(orientation, w, h){
             if(Ext.Viewport.orientation == 'portrait'){
                


             } else {
                  
                   this.remove(topPanel);


             } 
 }

this seems to remove the top panel as requested, but not sure what or how to write the doLayout() code??


For your question with regards to the wrapper panel I am using the following layout:

layout: {
type: 'vbox',
align: 'stretch',
},

In correction to the first bit of code the top panel is actually a Ext.Carousel not ext.panel.

Many Thanks
Si

[mitchellsimoens]

after this.remove(topPanel)... do a this.doLayout()

[simondavies]

Thanks for this , but my issue is that now I have removed the top panel on landscape but when it rotates back to portrait I would like to have my topPanel appear again/ put back. something like

onOrientationChange: function(orientation, w, h){

             if(Ext.Viewport.orientation == 'portrait'){

                *** PUT TOP PANEL BACK IN AND REFRESH LAYOUT ****  
           
                      } else {

            this.remove(topPanel);
             this.doLayout();             

}}

Many Thanks

[mitchellsimoens]

There is a way to remove a component without destroying it... basically just remove it from the DOM...

onOrientationChange: function(orientation, w, h) {
    //instead of Ext.Viewport.orientation, what is the orientation argument?
    if (Ext.Viewport.orientation == 'portrait') {
        this.add(topPanel);
    } else {
        this.remove(topPanel, false); //false will not destroy the component, just remove it from the DOM
    }

    this.doLayout();
}

[simondavies]

thanks for the reply, looks like we might be getting somewhere. I have created a new view thats plain and in a simple form. See below:

var homePanelTop = new Ext.Panel({    id:'topCont',
    cls:'topCont'    
});
var homePanelBtm = new Ext.Panel({
    id:'btmCont',
    cls:'btmCont'
});


App.views.HomeIndex = Ext.extend(Ext.Panel, {
        id:'mainlayout',
        fullscreen : true,
        layout: {
                    type: 'vbox',
                    align: 'stretch',
            },
            defaults:{flex:1},
         items: [homePanelTop, homePanelBtm],
         suspendLayout: true,
            monitorOrientation: true,
            orientationchange: this.onOrientationChange,
            onOrientationChange: function(orientation, w, h){
                this.suspendLayout = false;
                 if(orientation === 'portrait'){
                         console.log('P: ' + orientation);
                            this.add(homePanelTop, true);
                        } else {
                         console.log('L: ' + orientation);
                            this.remove(homePanelTop, false);
                    }
                    this.doLayout();
            }
});
Ext.reg('HomeIndex', App.views.HomeIndex);

What i expect to see with the above view is on first load and portrait, there will be two panels, the top panel(yellow) and a bottom panel (blue). When I rotate as normal I still get the same effect.

But what I am after is that when I rotate to landscape the top panel (yellow) is removed and the bottom panel (blue) fills the rest of the space.

Then when I rotate back to portrait I get both panels back at their design sizes (flex:1)

Whats happening using the code above (testing in chrome) is that the top panel (yellow) remains at the top but slightly smaller in height and does not disappear like it should

Anyway notice the two console trace commands I have and these are showing the following readings on rotation:

After first load, I then rotate to landscape and the output is:

L: landscape
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.

The when I rotate back to portrait I get the following output:

L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
P: portrait
P: portrait


So looking at this on the lanscape rotation it actually some how fires the onorientationchange function 4 times, the first one is ok the other three with an error as the first one already removed it so thats what the warnings are for I believe.


Then with the portrait ones I get two registering as lanscape calls then two hits registering portrait calls.

All this with one movement, so is this somehow causing the remove and add code's not to work as predicted and how to prevent the orientation being called four times on rotation??

If anyone has an idea on the development of this feel free to join in.

Thanks for the help so far
Si