Results 1 to 7 of 7

Thread: Removing an item then updating view on orientation change etc

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137

    Question Removing an item then updating view on orientation change etc

    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:

    Code:
    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:

    Code:
          
    
    
    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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137

    Question

    thanks for the reply:

    from your suggestion I have the following:

    Code:
    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

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    after this.remove(topPanel)... do a this.doLayout()
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137

    Question

    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

    Code:
    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

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

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

    Code:
    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();
    }
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137

    Question

    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:

    Code:
    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

Tags for this Thread

Posting Permissions

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