<div class="view mblView navPane">
	
	<script type="dojo/require">at: "dojox/mvc/at"</script>
	<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="label: 'Scrollable List Selection'" data-app-constraint="top"></h1>
	<h2 data-dojo-type="dojox/mobile/RoundRectCategory" data-app-constraint="top">Select a Scrollable List</h2>
	<div data-dojo-type="dojox/app/widgets/Container" data-app-constraint="center" data-dojo-props="scrollable: true">
		
		<div>
			<ul data-dojo-type="dojox/mobile/RoundRectList"  data-dojo-props='variableHeight:true'>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-props="clickable: true, noArrow: true, target: 'TestInfo', url: '#TestInfo'">
					<div class="textBox">
						<div class="subject">Test Instructions</div>
						Test instructions, notes and known problems (transition none)				
					</div>				
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-props="clickable: true, noArrow: true, target: 'Scrollable1', url: '#Scrollable1'">
					<div class="textBox">
						<div class="subject">Scrollable list One</div>
					Uses app/widgets/Container with a fixed Header and a fixed Footer both with data-app-constraint	 (transition slide)				
					</div>				
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-props="clickable: true, noArrow: true, target: 'Scrollable1P', url: '#Scrollable1P'">
					<div class="textBox">
						<div class="subject">Scrollable list OneP</div>
						Programmatic creation of WidgetList uses app/widgets/Container with a fixed Header and a fixed Footer both with data-app-constraint  (transition flip)					
					</div>				
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-props="clickable: true, noArrow: true, target: 'Scrollable2', url: '#Scrollable2'">
					<div class="textBox">
						<div class="subject">Scrollable list Two</div>
					Uses app/widgets/Container with a fixed Header and a fixed Footer both with data-app-constraint  (transition fade)
					</div>				
				</li>
			
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-props="clickable: true, noArrow: true, target: 'Scrollable3', url: '#Scrollable3'">
					<div class="textBox">
						<div class="subject">Scrollable list Three</div>
						Uses app/widgets/Container with a fixed Header no footer with data-app-constraint					
					</div>				
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
				data-dojo-props="clickable: true, noArrow: true, transition:'fade', target: 'Scrollable4', url: '#Scrollable4'">
					<div class="textBox">
						<div class="subject">Scrollable list Four</div>
					Uses dojox/mobile/ScrollableView (removed height="auto") with a fixed Header and a fixed Footer (transition event fade)					
					</div>				
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
				data-dojo-props="clickable: true, noArrow: true, transition:'flip', target: 'Scrollable5', url: '#Scrollable5'">
					<div class="textBox">
					<div class="subject">Scrollable list Five</div>
					Uses dojox/mobile/ScrollableView (removed height="auto") with a fixed Header and No Footer (transition event flip)				
					</div>				
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-props="clickable: true, noArrow: true, target: 'ListItemDomButtons', url: '#ListItemDomButtons'">
					<div class="textBox">
						<div class="subject">Dojox Mobile Test</div>
						A copy of the dojox/mobile test test_ListItemDomButtons, (removed height="auto"), had used it to avoid problem with initially showing this page.					
					</div>				
				</li>
			</ul>
		</div>
	</div>
</div>