1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Romania
    Posts
    23
    Vote Rating
    0
    chriss is on a distinguished road

      0  

    Default slide layout

    slide layout


    A card layout that allows animations when switching cards. Maybe this is not the best solution, this is why i ask you guys to make it better.

    PHP Code:
    Ext.define("Crs.lib.layouts.Slide",{
        
    alias: ['layout.slide'],

        
    extend'Ext.layout.container.AbstractCard',
        
    requires:["Crs.lib.SyncAnim"],

        
    constructor: function(){
            var 
    self this
            self
    .callParent(arguments)
            
    self.itemCls += " rvp-slide-layout"

            
    Ext.applyIf(self,{
                
    animType"horizontal",
                
    animDuration1000
            
    })
        },

        
    setActiveItem: function(newCardcallback) {
            
    // copied from Ext.layout.container.Card

            
    var me this,
                    
    owner me.owner,
                    
    oldCard me.activeItem,
                    
    newIndex;
            
    // Block upward layouts until we are done.
            
    me.layoutBusy true;

            
    newCard me.parseActiveItem(newCard);
            
    newIndex owner.items.indexOf(newCard);

            
    // If the card is not a child of the owner, then add it
            
    if (newIndex == -1) {
                
    newIndex owner.items.items.length;
                
    owner.add(newCard);
            }

            
    // Is this a valid, different card?
            
    if (newCard && oldCard != newCard) {
                
    // If the card has not been rendered yet, now is the time to do so.
                
    if (!newCard.rendered) {
                    
    me.renderItem(newCardme.getRenderTarget(), owner.items.length);
                    
    me.configureItem(newCard0);
                }

                
    me.activeItem newCard;

                
    // Fire the beforeactivate and beforedeactivate events on the cards
                
    if (newCard.fireEvent('beforeactivate'newCardoldCard) === false) {
                    
    me.layoutBusy false;
                    return 
    false;
                }
                if (
    oldCard && oldCard.fireEvent('beforedeactivate'oldCardnewCard) === false) {
                    
    me.layoutBusy false;
                    return 
    false;
                }

                
    // If the card hasnt been sized yet, do it now
                
    if (!me.sizeAllCards) {
                    
    me.setItemBox(newCardme.getTargetBox());
                }
                else {
                    
    // onLayout calls setItemBox
                    
    me.onLayout();
                }

                if (
    oldCard) {
                    
    oldCard.fireEvent('deactivate'oldCardnewCard);
                }

                
    // Make sure the new card is shown
                
    if (newCard.hidden) {
                    
    newCard.show();
                }

                
    newCard.fireEvent('activate'newCardoldCard);

                
    me.layoutBusy false;

                if (!
    me.sizeAllCards) {
                    if (!
    owner.componentLayout.layoutBusy) {
                        
    me.onLayout();
                    }
                }

    // this part is new

                
    if(oldCard){

                    var 
    ownerBox owner.getBox()

                    var 
    dir = (owner.items.indexOf(newCard) > owner.items.indexOf(oldCard) ? : -1), newX 0newY 0

                    
    if( self.animType == "horizontal" ){
                        
    newX ownerBox.ownerBox.width
                    
    }else{
                        
    newY ownerBox.ownerBox.height
                    
    }

                    
    newCard.el.setOpacity(0.5)
                    
    oldCard.el.setOpacity(0.5)


                    new 
    Crs.lib.SyncAnim([{
                        
    targetnewCard,
                        
    from:{
                            
    ynewY*dir,
                            
    xnewX*dir
                        
    },
                        
    to: {
                            
    xownerBox.x,
                            
    yownerBox.y
                        
    }
                    },{
                        
    targetoldCard,
                        
    from:{
                            
    xownerBox.x,
                            
    yownerBox.y
                        
    },
                        
    to: {
                            
    x: -1*dir*newX,
                            
    y: -1*dir*newY
                        
    }

                    }],{
                        
    duration1000
                    
    }, function(){
                        
    newCard.el.setOpacity(1)
                        
    oldCard.el.setOpacity(1)
                        
    oldCard.hide()


                        
    Ext.callback(callback)
                    })

                }else{
                    
    Ext.callback(callback)
                }





                return 
    newCard;
            }

            
    me.layoutBusy false;
            
    Ext.callback(callback)
            return 
    false;
        }
    }) 
    a Sync anim class ( well, i could have used the syncFx() method )

    PHP Code:
    Ext.define("Crs.lib.SyncAnim",{

        
    constructor: function(){
            var 
    anim_count 0args Ext.toArray(arguments), anim_configs args.shift(), common_config args.shift() || {}, callback Ext.emptyFn

            
    if(common_config){
                if(
    Ext.isFunction(common_config)){
                    
    callback common_config
                    common_config 
    = {}
                }else if( 
    args.length == ){
                    
    callback args[0]
                }
            }



            
    anim_configs.forEach(function(config){
                
    Ext.apply(configcommon_config);

                (new 
    Ext.fx.Anim(config)).on({
                    
    afteranimate: function(){
                        
    anim_count--
                        if( 
    anim_count == ){
                            
    Ext.callback(callback)
                        }
                    },
                    
    beforeanimate: function(){
                        
    anim_count++
                    }
                })

            })
        }

    }) 

    The css

    PHP Code:
    .rvp-slide-layout{
        
    position:absolute;


    And an example

    PHP Code:
    Ext.require("Crs.lib.layouts.Slide", function(){
                
    comp = new Ext.Viewport({
                    
    layout:"slide",
                    
    activeItem:0,
                    
    items:[{
                        
    title:"Card 1"
                    
    },{
                        
    title:"Card 2"
                    
    }]
                })
            }) 

  2. #2
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    elitedivision is on a distinguished road

      0  

    Default


    Hi, thanks for your work!

    In Crs.lib.layouts.Slide:

    PHP Code:
    self.animType == "horizontal" 
    should be
    PHP Code:
    me.animType == "horizontal" 

Similar Threads

  1. card layout, but how to slide animate?
    By dmartz in forum Ext: Discussion
    Replies: 21
    Last Post: 11 Apr 2014, 9:58 AM
  2. Hints for making the indicator show up only when moving from slide to slide.
    By nosarious in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 29 Aug 2010, 6:15 PM
  3. Card Layout with Slide Out and Slide In of the components
    By prasadk14 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 27 Jul 2010, 11:35 PM
  4. Is is possible programmatically slide In/Out region in border layout
    By atchijov in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 11 Jun 2009, 9:29 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar