I have been experimenting with Sencha for a while, and finally I decided to go with it and develop an app. In this app, I need to create a tree-like structure with Sencha Carousel, and I have some problems.
For the sake of explanation, I need a structure like the following one:
var aux = Ext.create('Ext.Carousel', {
direction: 'vertical',
items:[
{
xtype: 'panel',
id: 'pan',
html: 'GrandParent',
},
{
xtype: 'carousel',
direction: 'vertical',
items: [
{
xtype: 'panel',
id: 'inner-pan',
html: 'Parent',
},
{
xtype: 'panel',
id: 'leaf',
html: 'Child',
},
]
},
],
});
Ext.Viewport.setActiveItem(aux);
Note that I need this structure, I cannot use a 3 element Carousel, etc. This is the required structure.
When executed, this shows GrandParent, if I scroll down it shows Parent, and scrolling down again shows Child, which is the expected behaviour.
If I try to scroll up from Parent, I go to GrandParent, which is perfectly fine, however, scrolling up from Child should show Parent, however, it shows GrandParent.
How can I get the expected behaviour?? do you have any clue or starting point?
I will really appreciate your help on this issue,
Cheers,