PDA

View Full Version : Scrolling list on left side of this layout



jep
27 Sep 2010, 9:26 AM
Here's a pared down piece of code for what I'm trying to do:



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title id="title">Loading test</title>

<link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript" src="../ext-touch-debug.js"></script>

<script type="text/javascript">
Ext.setup({
onReady: function() {

var itemlist = new Ext.Panel({
layout:'vbox',
width: 300,
style:'background-color: #C0C0C0',
scroll:'vertical',
tpl: [
'<tpl for=".">',
'{text}<br>',
'</tpl>'
]
});

var map = new Ext.Map({
title: 'Map',
getLocation: true,
mapOptions: {
zoom: 12
}
});

var mainPanel = new Ext.Panel({
dockedItems:[itemlist],
fullscreen: true,
layout: 'hbox',
items:[map]
});

var itms = [];
for (var i = 0; i < 5; i++)
itms.push({text:"This is line " + i});
itemlist.update(itms);
}
});
</script>

</head>

<body></body>

</html>


So in Safari (desktop or iPad), when the left side contains fewer items than the normal page height, it still allows the user to try to scroll it. Is there some way to avoid this?

I'm probably going to switch over to using a carousel layout anyway, but I'm sure I'll need to deal with scrolling at some point and should learn the right way to do things. Speaking of which, is there any kind of auto-carousel layout that will automatically create multiple pages when the items would otherwise scroll off the screen? So like if five items fit on the screen and I add 13 items to the list, it makes a carousel with three pages. The first five on one page, the second five, then the last three. And then if I delete three items from page 1, they all shift up and I now have two carousel pages?

Thanks in advance.

evant
27 Sep 2010, 3:10 PM
Ext.setup({
onReady: function(){

var itemlist = new Ext.Panel({
layout: 'vbox',
width: 300,
style: 'background-color: #C0C0C0',
scroll: {
vertical: true,
bounces: false
},
tpl: ['<tpl for=".">', '{text}<br>', '</tpl>']
});

var map = new Ext.Map({
flex: 1,
title: 'Map',
getLocation: true,
mapOptions: {
zoom: 12
}
});

var mainPanel = new Ext.Panel({
dockedItems: [itemlist],
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [itemlist, map]
});

var itms = [];
for (var i = 0; i < 5; i++)
itms.push({
text: "This is line " + i
});
itemlist.update(itms);
}
});

jep
27 Sep 2010, 8:51 PM
Much appreciated! Are those object forms for scroll or layout somewhere in the docs? Or Ext.Map.flex? Just wondering as I couldn't find them in the API docs. I keep stumbling over stuff like this because I simply don't know stuff like you did even exists. I know, I know, it's still in beta. :D

evant
27 Sep 2010, 9:42 PM
The flex option, sort of, it could be documented better.

The scroller option specifies it can take a string or a Ext.util.Scroller config.

jep
28 Sep 2010, 6:49 AM
Cool, thanks for the Scroller reference. Nothing in the Panel help for scroll indicates it would even take a Scroller.

I THINK I understand the flex option, based on this:
http://www.sencha.com/forum/showthread.php?104683-What-does-flex-do