PDA

View Full Version : horizontal scrolling always bouncing back



tcurdt
22 Jan 2012, 9:21 AM
I am trying to create a custom panel that has a scrollable dataview at the bottom.


App.views.TestPanel = Ext.extend(Ext.Panel, {
initComponent: function() {
...
var datasheet = new Ext.Panel({
...
});


var scrollerTpl = new Ext.XTemplate(
'<ul class="scroller">',
'<tpl for=".">',
'<li><img src="images/ref/{id}_thumb.jpg"/></li>',
'</tpl>',
'</ul'
);


var scroller = new Ext.DataView({
dock: 'bottom',
store: this.store,
overItemCls: "scroller",
width: 117 * this.store.data.items.length,
itemSelector: "li",
tpl: scrollerTpl,
emptyText: 'No images to display',
scroll: 'horizontal',
});


Ext.apply(this, {
dockedItems: [
scroller,
datasheet,
],
items: [
{
region: 'center',
html: 'TEST',
},
]
});
App.views.TestPanel.superclass.initComponent.apply(this, arguments);
}
});



Unfortunately with the above code the DataView completely ignores the width and images are wrapping into a second line on the browser border. While I can scroll the view it just is not wide enough.

When I now move the scroller from the docketItems into items it sort of works. It is wide enough and I can scroll it but it always bounces back to position {0,0}.

Any idea what I am doing wrong here?

tcurdt
22 Jan 2012, 4:55 PM
Digging a little deeper I can see that snapToBoundary() brings the scroller back to a "valid" offsetBoundary. Of course now the question is why the offsetBoundary is wrong.

tcurdt
22 Jan 2012, 5:03 PM
I can see that updateBoundary() calculate a boundary of

{
bottom: 0
left: 0
right: 0
top: 0
}

tcurdt
22 Jan 2012, 5:45 PM
Turns out the trick is to declare the scrolling on the parent.
Trying really hard not to think about the hours wasted *sigh*

chris_np
24 May 2012, 6:18 PM
Turns out the trick is to declare the scrolling on the parent.
Trying really hard not to think about the hours wasted *sigh*Thanks to your comment, I only wasted about 45 minutes.