Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Animating two seperate panels/views on a link click

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137
    Answers
    5
    Vote Rating
    -2
      0  

    Default Answered: Animating two seperate panels/views on a link click

    I have the following class that extends a panel:

    Code:
    Ext.define("MyApp.view.Main", {    
        extend: 'Ext.Panel',
        xtype:'mainpage'..
    with in the html I have a link and a listener for this link as below:

    Code:
    ..
     html:'The Main Page<br /><br /><div><a href="#">Second Page</a>';
    ..
    listeners : {           
                element : 'element',
                delegate : 'a',
                tap : function(e, t) {
                 var nxtpage  =   Ext.getCmp(secondpage) || new MyApp.view.SecondPage;
         }
    ..
    now after the tap I would like that on the tap fn, that this current panel slides out to the left and the new panel (secondpanel) slides in form the right.

    I have added the a Ext.Anim to the actual function as below:

    Code:
    Ext.Anim.run(this, 'slide', {                    
                        out: false,
                        autoClear: true,
                        after:function(){Ext.Viewport.setActiveItem(nxtpage);
                    });
    Bu,t it is almost good, but it slides in the panel then loads in the new panel, so you get to see the first panel then a quick change to the new panel.

    What I could do with is the first panel slides out at the same time the second panel slides in.
    Similar to a navigation view, which i would use but as i am using links in my text/html not possible.

    Any Ideas would be greatly received.
    Thanks

  2. I'm not sure what Ext.view.getFirstPage is but this works for me:

    Code:
    Ext.define("MyApp.view.SecondPage", {
        extend: 'Ext.Panel',
        xtype:'secondpage',
        requires: ['Ext.TitleBar'],
        config: {
            fullscreen: true,
            styleHtmlContent:true,
            scrollable: 'vertical',
            title : 'Second Page',
            layout: {
                type: 'card'
            },
            items: [{
                html : 'Hello Second  Title'
            }]
        }
    });
    
    Ext.define("MyApp.view.FirstPage", {
        extend: 'Ext.Panel',
        xtype:'firstpage',
        requires: ['Ext.TitleBar'],
        config: {
            title:'First Page',
            fullscreen: true,
            styleHtmlContent:true,
            scrollable: 'vertical',
            layout: {
                type: 'card'
            },
            items: [{
                xtype: 'container',
                scrollable: 'vertical',
                style: 'margin: auto !important; text-align: center;',
                defaults: {
                    style: "margin: 10px; padding-top:5px; box-shadow: "+
                        "#d1d1d1 0px 0px 2px 2px; border-radius:6px; "+
                        "overflow: hidden;background-color: #5E99CC;",
                    height: 30,
                    width: 300
                },
                listeners : {
                    element : 'element',
                    delegate : 'a',
                    tap : function(e, t) {
                        /*Ext.view.getFirstPage.push({
                            xtype: 'secondpage'
                        });*/
                        var view = this.up('navigationview');
                        view.push({
                            xtype : 'secondpage'
                        });
                    }
                },
                items: [{
                    html : '<a href="#" data-id="secondpage">Goto Second Page</a>'
    
                },{
                    html : '<a href="#"data-id="thirdpage">Goto Third Page</a>'
                }]
            }]
        }
    });
    
    Ext.define("MyApp.view.Main", {
        extend: 'Ext.NavigationView',
        xtype:'homepage',
        requires: ['Ext.NavigationView','MyApp.view.FirstPage','MyApp.view.SecondPage'],
    
        config: {
            navigationBar:{
                items: [{
                    text:'Home',
                    align: 'right'
                }]
            },
            styleHtmlContent:true,
            fullscreen: true,
            items: [
                {xtype : 'firstpage'}
            ]
        }
    });

  3. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,070
    Answers
    3976
    Vote Rating
    1394
      0  

    Default

    Why can't you use navigation view when you use links?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137
    Answers
    5
    Vote Rating
    -2
      0  

    Default

    I cannot seem to code it right or get it took work probably that way, so gave up thinking I had to add a list view etc to do it which it not what I want, just a simple panel/ card view with html content and normal links
    Last edited by simondavies; 27 Mar 2012 at 2:25 PM. Reason: spelling

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137
    Answers
    5
    Vote Rating
    -2
      0  

    Default

    I would love to use a Nav View, thus having the back button doen automatically, but how would I incorporate my listener into a nav view push, as I have tried but failed

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137
    Answers
    5
    Vote Rating
    -2
      0  

    Default

    I have tried to do this as a nav view but am failing here is my code:

    Main.js
    Code:
    Ext.define("MyApp.view.Main", {
        extend: 'Ext.NavigationView',
        xtype:'homepage',  
        requires: ['Ext.NavigationView','MyApp.view.FirstPage','MyApp.view.SecondPage'],
        
        config: {
            navigationBar:{
            items: [{
                text:'Home',
                align: 'right'
                }]
                },
            styleHtmlContent:true,
            fullscreen: true,
            items: [
                {xtype : 'firstpage'}
                ]
        }
    });
    FirstPage.js

    Code:
    Ext.define("MyApp.view.FirstPage", {
        extend: 'Ext.Panel',
        xtype:'firstpage',  
        requires: ['Ext.TitleBar'],
        config: {
            title:'First Page',
               fullscreen: true,
            styleHtmlContent:true,
            scrollable: 'vertical',
            layout: {
                    type: 'card'
                },
            items: [{
                    xtype: 'container',
                    scrollable: 'vertical',
                     style: 'margin: auto !important; text-align: center;',
                    defaults: {
                        style: "margin: 10px; padding-top:5px; box-shadow: "+
                               "#d1d1d1 0px 0px 2px 2px; border-radius:6px; "+
                               "overflow: hidden;background-color: #5E99CC;",
                        height: 30,
                        width: 300
                    },
                    listeners : {
                            element : 'element',
                            delegate : 'a',
                            tap : function(e, t) {
                                Ext.view.getFirstPage.push({
                                        xtype: 'secondpage'
                                    });
                            }
                        },
                    items: [{
                        html : '<a href="#" data-id="secondpage">Goto Second Page</a>',
                        
                    },{
                        html : '<a href="#"data-id="thirdpage">Goto Third Page</a>',
                    }
                ]}                
            ]
         }
    });
    SecondPage.js
    Code:
    Ext.define("MyApp.view.SecondPage", {
        extend: 'Ext.Panel',
        xtype:'secondpage',  
        requires: ['Ext.TitleBar'],
        config: {
           fullscreen: true,
           styleHtmlContent:true,
           scrollable: 'vertical',
           title : 'Second Page',
            layout: {
                type: 'card',
            },
            items: [{
                    html : 'Hello Second  Title'
                }
            ]
         }
    });

    So in my main I load in my FirstPage.js, which displays a list of normal links.

    When I click on a link I would like it to push my SecondPage.js just like a list/navigation view would, but within the listener of the AboutPage.js file I get there but I can not init the push command.

    Any ideas how I can get this to work.

    Thanks

  7. #6
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,070
    Answers
    3976
    Vote Rating
    1394
      0  

    Default

    I'm not sure what Ext.view.getFirstPage is but this works for me:

    Code:
    Ext.define("MyApp.view.SecondPage", {
        extend: 'Ext.Panel',
        xtype:'secondpage',
        requires: ['Ext.TitleBar'],
        config: {
            fullscreen: true,
            styleHtmlContent:true,
            scrollable: 'vertical',
            title : 'Second Page',
            layout: {
                type: 'card'
            },
            items: [{
                html : 'Hello Second  Title'
            }]
        }
    });
    
    Ext.define("MyApp.view.FirstPage", {
        extend: 'Ext.Panel',
        xtype:'firstpage',
        requires: ['Ext.TitleBar'],
        config: {
            title:'First Page',
            fullscreen: true,
            styleHtmlContent:true,
            scrollable: 'vertical',
            layout: {
                type: 'card'
            },
            items: [{
                xtype: 'container',
                scrollable: 'vertical',
                style: 'margin: auto !important; text-align: center;',
                defaults: {
                    style: "margin: 10px; padding-top:5px; box-shadow: "+
                        "#d1d1d1 0px 0px 2px 2px; border-radius:6px; "+
                        "overflow: hidden;background-color: #5E99CC;",
                    height: 30,
                    width: 300
                },
                listeners : {
                    element : 'element',
                    delegate : 'a',
                    tap : function(e, t) {
                        /*Ext.view.getFirstPage.push({
                            xtype: 'secondpage'
                        });*/
                        var view = this.up('navigationview');
                        view.push({
                            xtype : 'secondpage'
                        });
                    }
                },
                items: [{
                    html : '<a href="#" data-id="secondpage">Goto Second Page</a>'
    
                },{
                    html : '<a href="#"data-id="thirdpage">Goto Third Page</a>'
                }]
            }]
        }
    });
    
    Ext.define("MyApp.view.Main", {
        extend: 'Ext.NavigationView',
        xtype:'homepage',
        requires: ['Ext.NavigationView','MyApp.view.FirstPage','MyApp.view.SecondPage'],
    
        config: {
            navigationBar:{
                items: [{
                    text:'Home',
                    align: 'right'
                }]
            },
            styleHtmlContent:true,
            fullscreen: true,
            items: [
                {xtype : 'firstpage'}
            ]
        }
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  8. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137
    Answers
    5
    Vote Rating
    -2
      0  

    Default

    Ext.view.getFirstPage ignore one of my many get this to work things i probably left in :-)

    Will give this a try and let you know. Thanks for getting back to me
    Si

  9. #8
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137
    Answers
    5
    Vote Rating
    -2
      0  

    Default

    Hi mitchellsimoens

    Thanks for this i was missing 'var view = this.up('navigationview'); ' something I would have for a long time :-) I gather the 'navigationview' is the Navigation's view xtype?


    Thanks Again

  10. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    49
    Vote Rating
    0
      0  

    Default

    i've got the code implented
    it works for a single link
    but, i still have questions:

    - how do we use similar code for 2 or more links on the same page?

    - why is it sooo complex just to implement a link??
    i don't get it. a link is a link - or is it more complex when it comes to touch screens??

    super dumb question: let's say we didn't have mitchellsimoens answering the questions, where and how could we have found a solution? i've honestly spent too much time trying to read through the docs and am clueless - there seems to be little structure or guidance

    thanks

  11. #10
    Sencha User
    Join Date
    Aug 2011
    Location
    Plymouth, UK
    Posts
    137
    Answers
    5
    Vote Rating
    -2
      0  

    Default

    I used the data property to set the xtype for the page i would like the link to open then using this data property i then opened my page. Code below:

    URL's
    Code:
        <div class='className'><a data-id='pageone' href='#'>PAGE ONE</a></div>
        <div class='className'><a data-id='pagetwo' href='#'>PAGE TWO</a></div>
        <div class='className'><a data-id='pagethree' href='#'>PAGE THREE</a></div>
        <div class='className'><a data-id='pagefour' href='#'>PAGE FOUR</a></div>
    Listener Code:
    Code:
         listeners : {
                    element : 'element',
                    delegate : 'a',
                    tap : function(e, t) {
                e.preventDefault();
                var showpage    =    e.target.dataset.id;
                            var view = this.up('navigationview');
                           view.push({
                               xtype : showpage
                          });
                    }
        },
    Also you could use a switch statement instead of setting your xtype within the link data property:

    Code:
         listeners : {
                    element : 'element',
                    delegate : 'a',
                    tap : function(e, t) {
                e.preventDefault();
                var whichPage    =    e.target.dataset.id;
                var view = this.up('navigationview');
                               //-- lets find which page we clicked on and set the show page var 
                switch(whichPage){
                  case "pageone":
                        var showpage = "mypagextype";
                    break;
                  case "pagetwo":
                        var showpage = "mypagextype";
                    break;
                }    
                           view.push({
                               xtype : showpage
                          });
                    }
        },
    Hope this helps

Page 1 of 2 12 LastLast

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
  •