horizontal scrolling always bouncing back

[tcurdt]

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]

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]

I can see that updateBoundary() calculate a boundary of

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

[tcurdt]

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]

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.