Horizontal List not working.

[Dbms]

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.

[mitchellsimoens]

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.