PDA

View Full Version : DataView not scrolling



darren102
12 May 2013, 5:38 PM
Have a data view inside an hbox layout and have not been able to make it scroll at all. Tried numerous things including autoScoll, putting the dataview inside a container with fit layout and also overflowY: 'scroll' however nothing seems to work.

The code is below can any one point me in the right direction as to why it will not scroll?



Ext.define('Example.view.mainview.SampleCatalogData', {
extend: 'Ext.view.View',
xtype:'samplecatalogdata',
alias:'samplecatalogdata',


config: {
cls: 'samplecatalogdata',
overflowY: 'scroll',
tpl: [
'<tpl for=".">',
'<div class="item">',
'<img src="http://image.allmusic.com/92/adg/covers/drt000/t010/t01055myqow.jpg" />',
'</div>',
'</tpl>'
],
itemSelector: 'div.item',
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'},
{name: 'Jaws'}
]
})
}
});



The parent class for this is as follows




Ext.define('Example.view.mainview.Results', {
extend:'Ext.Container',
alias:'valuesresults',
xtype:'valuesresults',


requires:[
'Example.view.mainview.ValueFilters',
'Example.view.mainview.SampleCatalogData'
],


config: {
items: [
{
xtype:'valuefilters',
width: 230
},
{
xtype:'samplecatalogdata',
flex: 1,
margin: '5, 0, 0, 30'
}
]
}
});


My SCSS for the item component is as follows:



.samplecatalogdata {
background-color: rgba(192, 192, 192, 1) !important;
padding: 5px;


.item {
float: left;
width: 173px;
height: 237px;
margin: 5px;
padding: 5px;


img {
text-align: center;
width: 146px;
height: 220px;
box-shadow: 0px 3px 0px #888888;
}
}
}
}


I assumed the float:left might be causing the issue but taking that out did not resolve the issue either for non scrolling.

Any help or pointers appreciated.

mitchellsimoens
14 May 2013, 7:25 AM
You aren't giving the Example.view.mainview.SampleCatalogData a size to show so it will auto-size. You need to give it a height. I see you are giving it flex : 1 but that container (the parent class) isn't using a box layout

darren102
14 May 2013, 7:32 AM
Hi Mitchel

Thanks for the reply, the container above contains the layout for an hbox with the width 230 then flexing the rest.

The layout is shown for the container and i see the images but they just go off the end of the page, i think i have something wrong with the container layout but not sure, since even giving it a height the container still just makes itself the size of the data inside it and hence will not scroll.

darren102
24 May 2013, 5:43 AM
Turns out if you take the layout out of the config:{} then it works, that was the issue in the Ext.define of the class.



config: {
layout: {
type:'vbox',
align:'stretch'
}
}

should be

layout: {
type:'vbox',
align:'stretch'
}



Remove from the config parameter