PDA

View Full Version : Problem creating scrollable single row dataview of images



w011117
20 Aug 2009, 2:40 PM
Hello,
I am trying to use a Dataview to show a single row of images with a horizontal scrollbar only and have tried the code below with no success. No matter what I change the code to, the dataview always seems to show the start of a second row.
I took the initial code from the Dataview examples...

What I want to happen is the have the images continue offscreen and allow the scrollbar to see offscreen images.

I have no idea how to accomplish this...Any ideas would be helpful.....

Here is the javascript code:



MM.wall.friendstpl = new Ext.XTemplate(
'<tpl for=".">',
'<span class="thumb-wrap" id="{name}">',
'<span class="thumb"><img src="{url}" title="{name}"></span></span>',
'</tpl>',
'<div class="x-clear"></div>'
);

MM.wall.friendsDataview = new Ext.DataView({
id: 'MMFriendsDataview',
store: MM.wall.friendsStore,
tpl: MM.wall.friendstpl,
x: 0,
y: 10,
anchor: '90% -20',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
style: 'overflow-y: hidden;',
listeners: {
selectionchange: {
fn: function(dv,nodes){
console.log('Selected Ad');
}
}
,dblclick: {
fn: function(dv, ndx, nodes, e ){
e.stopEvent();
MM.wall.showSelectedAd(dv, ndx, nodes, e);
}
}
}
});

/*****
* Setup the Friends / Lists container Panel
*/
MM.wall.friendsPanel = new Ext.Panel({
id: 'friendsListsPanel',
layout: 'absolute',
margins: '0 0 0 0',
bodyBorder: false,
bodyStyle: 'overflow-x: auto; overflow-y: hidden;',
items: MM.wall.friendsDataview
});

Here is the CSS code:



/***
Friends and Lists Dataview Style
***/
#friendsListsPanel {
height: 100%;
}

#friendsListsPanel .x-panel-bwrap {
height: 100%;
}

#friendsListsPanel .x-panel-body{
background: white;
font: 11px Arial, Helvetica, sans-serif;
height: 100%;
}
#friendsListsPanel .thumb{
background: #FFFFFF; /*#dddddd;*/
padding: 3px;
vertical-align: bottom;
}
#friendsListsPanel .thumb img{
/*height: 76px; 60 */
/*width: 76px; 80 */
vertical-align: bottom;
}
#friendsListsPanel .thumb-wrap{
float: left;
vertical-align: bottom;
/*margin: 1px;*/
margin-right: 20px;
/*margin-left: 5px;*/
/*margin-right: 0;*/
/*padding: 20px 5px;*/
}
#friendsListsPanel .thumb-wrap span{
display: block;
/*overflow: hidden;*/
text-align: center;
}

Can anyone tell me how to accomplish this?

Thanks,
Timmer