What's New?

[CLOSED] Animation on CardLayout

  1. #1
    May 29, 2012, 9:36 PM

    [CLOSED] Animation on CardLayout

    I know ExtJS has this, but is there any way to enable animation on a cardlayout?
    Last edited by Daniil; Jun 08, 2012 at 2:28 PM. Reason: [CLOSED]
  2. #2
    May 30, 2012, 10:59 AM
    Hi,

    What animation would you like to apply for CardLayout?

    Generally, there is no any animation functionality in CardLayout, it just shows and hides cards.

    Do you need something like carousel? If so, please follow this thread:
    http://forums.ext.net/showthread.php?13508
  3. #3
    May 30, 2012, 5:02 PM
    i just want a sliding effect when one card transitions to another.
  4. #4
    May 30, 2012, 5:05 PM
    It means that I understand you correctly. Please investigate the thread I've mentioned.

    The following functions might be helpful.
    http://docs.sencha.com/ext-js/3-4/#!...method-slideIn
    http://docs.sencha.com/ext-js/3-4/#!...ethod-slideOut
  5. #5
    May 30, 2012, 7:51 PM
    I'm playing with the example, but it seems very complicated.
  6. #6
    Jun 05, 2012, 4:18 PM
    Yes, it's a difficult task.

    Please look at the example below. It doesn't work ideal, but, I hope, might be helpful for you.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript" src="resources/js/MyCardLayout.js"></script>

    <script type="text/javascript">
        var activeIndex = 0;

        var rotate = function () {
            ContainerMain.layout.setActiveItem(++activeIndex % 3);
        };
    </script>

</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Container 
        ID="ContainerMain" 
        runat="server" 
        Width="400" 
        Height="400" 
        Layout="mycard"
        ActiveIndex="0">
        <Items>
            <ext:Container 
                runat="server" 
                Html="Card 1" 
                StyleSpec="background-color: yellow;" />
            <ext:Container 
                runat="server" 
                Html="Card 2" 
                StyleSpec="background-color: green;" />
            <ext:Container 
                runat="server" 
                Html="Card 3" 
                StyleSpec="background-color: blue;" />
        </Items>
    </ext:Container>

    <ext:Button runat="server" Text="Rotate">
        <Listeners>
            <Click Fn="rotate" Buffer="150" />
        </Listeners>
    </ext:Button>
</body>
</html>
    MyCardLayout
    Ext.layout.MyCardLayout = Ext.extend(Ext.layout.CardLayout, {
    setActiveItem : function (item) {
        var ai = this.activeItem,
            ct = this.container;

        item = ct.getComponent(item);

        // Is this a valid, different card?
        if (item && ai != item) {

            // Changing cards, hide the current one
            if (ai) {
                ai.el.slideOut("l", {
                    callback : function () {
                        ai.hide();
                        ai.fireEvent('deactivate', ai);

                        var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered);

                        // Change activeItem reference
                        this.activeItem = item;

                        // The container is about to get a recursive layout, remove any deferLayout reference
                        // because it will trigger a redundant layout.
                        delete item.deferLayout;

                        // Show the new component
                        item.show();
                        this.layout();
                        item.el.slideIn("r");

                        if(layout){
                            item.doLayout();
                        }                        
                        item.fireEvent('activate', item);
                    },
                    scope : this
                });
            } else {
                var layout = item.doLayout && (this.layoutOnCardChange || !item.rendered);

                // Change activeItem reference
                this.activeItem = item;

                // The container is about to get a recursive layout, remove any deferLayout reference
                // because it will trigger a redundant layout.
                delete item.deferLayout;

                // Show the new component
                item.show();

                this.layout();

                if(layout){
                    item.doLayout();
                }
                item.fireEvent('activate', item);
            }
        }
    }
});

Ext.Container.LAYOUTS['mycard'] = Ext.layout.MyCardLayout;
  7. #7
    Feb 26, 2015, 12:42 PM
    Here is a similar example for Ext.NET v2:
    http://forums.ext.net/showthread.php...l=1#post256081

Similar Threads

  1. [CLOSED] [2.0] TreePanel Animation slow?
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 25, 2012, 5:24 PM
  2. Animation to the window
    By ebineva in forum 1.x Help
    Replies: 0
    Last Post: May 13, 2010, 1:34 AM
  3. [CLOSED] Portlet Drop Animation
    By tansu in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 10, 2009, 3:26 AM
  4. [CLOSED] CardLayout rendering ALL panel contents at once AND OUTSIDE the CardLayout?
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 26, 2009, 3:08 PM
  5. [CLOSED] Ajax Events Loading Animation
    By tas in forum 1.x Help
    Replies: 2
    Last Post: Oct 20, 2008, 3:11 AM

Tags for this Thread

Posting Permissions