Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    2
    Vote Rating
    0
    pfazel is on a distinguished road

      0  

    Default Ext.ux.Carousel - Carousel menu for Ext JS 4

    Ext.ux.Carousel - Carousel menu for Ext JS 4


    Hi,
    i wrote a simple carousel plugin for Ext JS 4, this is a work in progress.
    help me to improve this component, also you are welcome to use it in your projects if you wish.
    the code is written in coffee.script, and i tried to put all base styles in the component, but still you can overwrite them via css style sheet.
    to see the configs of this component just take look at code, i will provide a documentation very soon.
    Thanks

    Code:
    //Ext.ux.Carousel code start
    (function() {
    Ext.define('Ext.ux.Carousel', {
    extend: 'Ext.DataView',
    alias: 'widget.carousel',
    alternateClassName: 'carousel',
    baseCls: 'x-carousel',
    style: 'overflow: hidden;position: relative;',
    itemSelector: 'li.x-carousel-item',
    interval: 2000,
    taskCount: 0,
    baseStep: 0,
    autoStart: true,
    direction: 'left',
    loop: true,
    buttons: false,
    puaseOnHover: false,
    emptyText: 'no item to display',
    template: '',
    nextButtonText: 'next',
    previousButtonText: 'previous',
    slideContainerStyle: '-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;position: absolute;',
    initComponent: function() {
    if (this.buttons) {
    this.tpl = "<div id=\"x-carousel-buttons\" style=\"position: absolute;z-index: 10000;\"><a href=\"#\" id=\"x-carousel-buttons-prev\">" + this.previousButtonText + "</a><a href=\"#\" id=\"x-carousel-buttons-next\">" + this.nextButtonText + "</a><div class=\"clear\"></div></div><div id=\"x-carousel-slides\" style=\"" + this.slideContainerStyle + "\"><ul><tpl for=\".\"><li class=\"x-carousel-item\"> " + this.template + " </li></tpl></ul></div>";
    } else {
    this.tpl = "<div id=\"x-carousel-slides\" style=\"" + this.slideContainerStyle + "\"><ul><tpl for=\".\"><li class=\"x-carousel-item\"> " + this.template + " </li></tpl></ul></div>";
    }
    this.on({
    itemmouseup: this.onMouseClick,
    childready: this.initializeView,
    afterrender: function() {
    var that;
    that = this;
    return setTimeout(function() {
    return that.fireEvent('childready');
    }, 1);
    },
    scope: this
    });
    return this.callParent(arguments);
    },
    initializeView: function(view, opt) {
    var display, float, that, ul;
    if (this.autoStart) {
    this.taskRunner();
    }
    if (this.puaseOnHover && this.taskCfg) {
    this.on({
    itemmouseenter: this.onMouseOver,
    itemmouseleave: this.onMouseOut,
    scope: this
    });
    }
    this.itemHeight = this.height;
    this.itemWidth = this.width;
    ({
    float: '',
    display: ''
    });
    this.storeCount = this.store.getCount();
    this.slidesContainer = Ext.get('x-carousel-slides');
    this.slidesContainer.setTop(0);
    ul = this.slidesContainer.child('ul');
    if (this.direction === 'left') {
    float = 'left';
    display = 'inline-block';
    ul.setSize(this.itemWidth * this.storeCount * 2, this.itemHeight);
    this.slidesContainer.setLeft(0);
    } else if (this.direction === 'right') {
    float = 'right';
    display = 'inline-block';
    ul.setSize(this.itemWidth * this.storeCount * 2, this.itemHeight);
    this.slidesContainer.setRight(0);
    } else if (this.direction === 'up') {
    display = 'block';
    ul.setSize(this.itemWidth, this.itemHeight);
    this.slidesContainer.setLeft(0);
    }
    that = this;
    Ext.Array.each(Ext.DomQuery.select('.x-carousel-item'), function(item) {
    var itemEl;
    itemEl = Ext.get(item);
    itemEl.setSize(that.itemWidth, that.itemHeight);
    return itemEl.setStyle({
    float: float,
    display: display
    });
    });
    if (this.buttons) {
    Ext.get('x-carousel-buttons-next').on('click', this.next, this);
    return Ext.get('x-carousel-buttons-prev').on('click', this.previous, this);
    }
    },
    next: function() {
    if (this.taskCount < this.storeCount - 1) {
    return this.scroll[this.direction](this.slidesContainer, ++this.taskCount, this.itemWidth, this.itemHeight);
    }
    },
    previous: function() {
    if (this.taskCount >= 1) {
    return this.scroll[this.direction](this.slidesContainer, --this.taskCount, this.itemWidth, this.itemHeight);
    }
    },
    onMouseOver: function() {
    return Ext.TaskManager.stop(this.taskCfg);
    },
    onMouseOut: function() {
    return Ext.TaskManager.start(this.taskCfg);
    },
    onMouseClick: function() {
    return console.log('item clicked');
    },
    scroll: {
    up: function(el, count, itemWidth, itemHeight) {
    return el.setTop(-itemHeight * count);
    },
    left: function(el, count, itemWidth, itemHeight) {
    el.addCls('hor');
    return el.setLeft(-itemWidth * count);
    },
    right: function(el, count, itemWidth, itemHeight) {
    el.addCls('hor');
    return el.setRight(-itemWidth * count);
    }
    },
    loopHandler: {
    up: function(el) {
    return el.setTop(0);
    },
    left: function(el) {
    return el.setLeft(0);
    },
    right: function(el) {
    return el.setRight(0);
    }
    },
    restartTask: function(task) {
    Ext.TaskManager.stop(task);
    return Ext.TaskManager.start(task);
    },
    taskRunner: function() {
    this.taskCfg = {
    run: function(count) {
    if (this.taskCount < this.storeCount) {
    this.scroll[this.direction](this.slidesContainer, this.taskCount, this.itemWidth, this.itemHeight);
    if (this.taskCount !== 0 && count === 1) {
    this.baseStep = this.taskCount;
    }
    return this.taskCount = this.baseStep + count;
    } else if (this.loop) {
    this.baseStep = 0;
    this.taskCount = 0;
    this.loopHandler[this.direction](this.slidesContainer);
    return this.restartTask(this.taskCfg);
    } else {
    return Ext.TaskManager.stop(this.taskCfg);
    }
    },
    interval: this.interval,
    scope: this
    };
    return Ext.TaskManager.start(this.taskCfg);
    }
    });
    }).call(this);

    Sample usage:

    Code:
    //Sample Usage
    Ext.onReady(function() {
    //Define a store to use as carousel items.
    var store = Ext.create('Ext.data.Store', {
    fields: ['title', 'imgSrc'],
    data: [{
    title: 'Cloud Forest',
    imgSrc: 'http://www.irpedia.com/upload/iblock/986/9861ba4be2ccb35b2cf655c68eb6d7b6.jpg'},
    {
    title: 'Cloud Forest 2',
    imgSrc: 'http://www.irpedia.com/upload/iblock/e94/e94a2e2acf3cfadfdc815c442fec6e79.jpg'},
    {
    title: 'Cloud Forest',
    imgSrc: 'http://www.irpedia.com/upload/iblock/aac/aac93f9f82dbb656ece5f9b546ef0417.jpg'}]
    });
    
    //Define a customized carousel 
    Ext.define('MyCarousel', {
    extend: 'Ext.ux.Carousel',
    alias: 'widget.mycarousel',
    template: '<img src="{imgSrc}" alt="{title}" style="width:300px;height:225px" />',
    store: store,
    interval: 3000,
    direction: 'left',
    loop: true,
    buttons: false,
    puaseOnHover: true,
    width: 300,
    height: 225
    });
    
    //Create a panel and use mycarousel as one of it's child item.
    Ext.create('Ext.panel.Panel', {
    width: '100%',
    height: 300,
    items: [
    {
    html: 'This Page should be seen in a css3 supported web browser'},
    {
    xtype: 'mycarousel'}
    ],
    renderTo: Ext.getBody()
    });
    })
    DEMO Page

    Demo Page 2 (Picture Slide)

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    5
    Vote Rating
    0
    drplasma is on a distinguished road

      0  

    Default great

    great


    Thanks for the efforts.A carousel was much appreciated for the big extjs framework.
    The code piece you have included for some reason missed brackets and parenthesis.please include them on a zip file and/or github.

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    2
    Vote Rating
    0
    pfazel is on a distinguished road

      0  

    Default Hello

    Hello


    The original code is written in CoffeeScript which is the cause of different syntax, i put JS syntax in main post.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    27
    Vote Rating
    0
    misterblinky is on a distinguished road

      0  

    Default Can you provide the HTML markup, etc?

    Can you provide the HTML markup, etc?


    Hi ... interested to try this. Can you provide ALL the code needed to run it? Including

    a) HTML markup on page (an example page)
    b) The code for teh store.
    c) whatever else is needed to run this.

    If you've improved it since your original post, maybe edit the original post with the updated code?

    thanks

  5. #5
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    472
    Vote Rating
    12
    wemerson.januario will become famous soon enough

      0  

    Default


    where is the css file?
    Please post a zip file of all needed files to run it, or a demo url.

    thanks
    Wemerson Januario
    Twitter:
    @januariocoder
    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Developer

  6. #6
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    638
    Vote Rating
    18
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      0  

    Default DEMO

    DEMO


    Please provide a demo URL...
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...
    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.
    ================================================
    Simple. Enjoy.