Results 1 to 10 of 38

Thread: Ext.layout.SlideLayout - Sliding Card Layout (Shift Fx)

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
      0  

    Default Ext.layout.SlideLayout - Sliding Card Layout (Shift Fx)

    Hey guys,

    I had a need for a card panel layout that used slide effects.

    See: Live Demo.

    Shift fX config can be set through layoutConfig eg:

    PHP Code:
    layoutConfig: {
        
    easing'easeOut',
        
    duration1,
        
    opacity.1

    The code:
    PHP Code:
    Ext.layout.SlideLayout Ext.extend(Ext.layout.FitLayout, {
        
        
    deferredRender false,

        
        
    renderHidden false,
        
    easing'none',
        
    duration.5,
        
    opacity1,

        
        
    setActiveItem : function(itemInt){
            if (
    typeof(itemInt) == 'string') { itemInt this.container.items.keys.indexOf(itemInt); }
            else if (
    typeof(itemInt) == 'object') { itemInt this.container.items.items.indexOf(itemInt); }
            var 
    item this.container.getComponent(itemInt);
            if(
    this.activeItem != item){
                if(
    this.activeItem){
                    if(
    item && (!item.rendered || !this.isValidParent(itemthis.container))){
                        
    this.renderItem(itemitemIntthis.container.getLayoutTarget()); item.show();
                    }
                    var 
    = [this.container.body.getX() - this.container.body.getWidth(), this.container.body.getX() + this.container.body.getWidth()];
                    
    this.activeItem.el.shift({ durationthis.durationeasingthis.easingopacitythis.opacityx:(this.activeItemNo itemInt s[0] : s[1] )});
                    
    item.el.setY(this.container.body.getY());
                    
    item.el.setX((this.activeItemNo itemInt s[1] : s[0] ));
                    
    item.el.shift({ durationthis.durationeasingthis.easingopacity1x:this.container.body.getX()});
                }
                
    this.activeItemNo itemInt;
                
    this.activeItem item;
                
    this.layout();
            }
        },

        
        
    renderAll : function(cttarget){
            if(
    this.deferredRender){
                
    this.renderItem(this.activeItemundefinedtarget);
            }else{
                
    Ext.layout.CardLayout.superclass.renderAll.call(thiscttarget);
            }
        }
    });
    Ext.Container.LAYOUTS['slide'] = Ext.layout.SlideLayout
    Last edited by NeonMonk; 1 Jan 2009 at 9:51 PM. Reason: Added live demo link

Posting Permissions

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