1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    1
    Dbms is on a distinguished road

      0  

    Default Unanswered: Horizontal List not working.

    Unanswered: Horizontal List not working.


    Hi,

    I have to make a custom carousel which supports both the normal operation of carousel and also manual swipe of elements in each of the cards.

    I am trying to implement it using horizontal list, where each list element is one card of the carousel. This idea is not progressing because horizontal list is not scrolling.

    Here is the code:

    1. app.js

    Ext.application({
    name: "MyCarousel",


    models: ["Carouse"],
    stores: ["Carouse"],
    controllers: ["Carouse"],
    views: ["MyList"],


    launch: function () {
    var myList = {
    xtype: "mylist"
    };
    Ext.Viewport.add([myList]);


    }
    });

    2. MyList.js

    Ext.define("MyCarousel.view.MyList", {
    extend : "Ext.dataview.List",
    alias : "widget.mylist",
    config : {
    fullscreen : true,
    layout : 'hbox',
    items : [ {
    xtype : 'container',
    width: '100%',
    height: '500px',
    style : 'border: 1px solid red',
    html : 'This is item 1'
    }, {
    xtype : 'container',
    width: '100%',
    height: '500px',
    style : 'border: 1px solid green',
    html : 'This is item 2'
    }, {
    xtype : 'container',
    width: '100%',
    height: '500px',
    style : 'border: 1px solid blue',
    html : 'This is item 3'
    }, {
    xtype : 'container',
    width: '100%',
    height: '500px',
    style : 'border: 1px solid black',
    html : 'This is item 4'
    }
    ],
    inline : {
    wrap : false
    },
    scrollable : {
    direction : 'horizontal',
    directionLock : true,
    }
    }
    });

    Kindly provide a solution if anyone has any idea.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Couple things...

    1. Use BBCode CODE tags when you post code so it is readable.
    2. You are using a List which you don't need to use the items config unless specifying docked items.
    3. I don't see anywhere where you specify the store on the list.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1