PDA

View Full Version : [CLOSED] Scroll: 'vertical' on a Carousel hides content



rockinthesixstring
23 Oct 2011, 8:06 PM
I've got a carousel that works fine if
scroll: 'vertical' is not used, but as soon as I use it, all my content dissappears.

controller
Ext.define('rpc.controller.bible', {
extend: 'Ext.app.Controller',
views: ['bible.indexView'],
stores: [],
refs: [],

init: function () {
console.log('rpc.controller.bible ~ init');
}
});

view
Ext.define('rpc.view.bible.indexView', {
extend: 'Ext.Carousel',
alias: 'widget.bible-indexView',
requires: [
'Ext.carousel.Carousel'
],
config: {
items: [{
xtype: 'panel',
items: [{
xtype: 'bible-_chapterADayView'
}]
}]

},
initialize: function() {
console.log('rpc.view.bible.indexView ~ initialize');
this.callParent();
}
});

partial views
Ext.define('rpc.view.bible._chapterADayView', {
extend: 'Ext.Container',
alias: 'widget.bible-_chapterADayView',
layout: 'vbox',
config: {
items: [{
xtype: 'toolbar',
title: 'Chapter a Day',
docked: 'top'
}, {
xtype: 'container',
cls: 'rpc-outerPanelWrapper',


// REMOVE THIS AND IT WILL WORK
scroll: 'vertical',


items: [{
html: '<span style="float:right;"><i>Swipe for Bible in a Year</i><div class="x-icon-swipe x-icon-swipe-left"></div></span>'
}, {
xtype: 'container',
cls: 'x-panel-rpc',
items: [{
html: '<h1>Bible Reading</h1><i>Read a chapter a day</i>'
}]
}, {
xtype: 'container',
cls: 'x-panel-rpc',
items: [{
html: 'Rockin the lower info panel<br><br><br><br><br><br><br><br>more info<br><br><br><br>end'
}]
}]
}]
},
initialize: function() {
console.log('rpc.view.bible._chapterADayView ~ initialize');
this.callParent();
}
});

rockinthesixstring
23 Oct 2011, 9:40 PM
I trimmed the fat on my app and with the changes below, I can now get vertical scrolling as well as horizontal swiping.. But this has posed a new problem.

When scrolling vertically, it should "LOCK" the horizontal axis and prevent a swipe.
Likewise, when swiping horizontally, it should "LOCK" the vertical axis and prevent a scroll.

As it stands right now, swiping also scrolls and scrolling also swipes... IE: the panel free floats all over the place.


Ext.define('rpc.view.bible.indexView', {
extend: 'Ext.Carousel',
alias: 'widget.bible-indexView',
config: {
items: [{
xtype: 'toolbar',
title: 'Bible Reading Plan',
docked: 'top'
}, {
xtype: 'bible-_chapterADayView'
}, {
xtype: 'bible-_bibleInAYearView'
}]
},
initialize: function() {
console.log('rpc.view.bible.indexView ~ initialize');
this.callParent();
}
});

and


Ext.define('rpc.view.bible._chapterADayView', {
extend: 'Ext.Panel',
alias: 'widget.bible-_chapterADayView',
config: {
scrollable: true,
items: [{
xtype: 'container',
cls: 'rpc-outerPanelWrapper',
items: [{
html: '<span style="float:right;"><i>Swipe for Bible in a Year</i><div class="x-icon-swipe x-icon-swipe-left"></div></span>'
}, {
xtype: 'container',
cls: 'x-panel-rpc',
items: [{
html: '<h1>Chapter a Day</h1><i>Reading Plan</i>'
}]
}, {
xtype: 'container',
cls: 'x-panel-rpc',
items: [{
html: 'Rockin the lower info panel<br><br><br><br><br><br><br><br>more info<br><br><br><br>end'
}]
}]
}]
},
initialize: function() {
console.log('rpc.view.bible._chapterADayView ~ initialize');
this.callParent();
}
});




I'm pretty certain that the FIRST post in this thread is a bug, and I'm thinking this is a similar bug as well.

Please correct me if I'm wrong.

rockinthesixstring
24 Oct 2011, 10:48 AM
Please close / delete this thread. I didn't communicate the issue clearly.. I will post a new thread.