dojox/app/tests/scrollableTestApp/views/Scrollable2.html

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

<div class="view mblView">
	<script type="dojo/require">at: "dojox/mvc/at"</script>

	<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props='label:"Scrollable List Two"' data-app-constraint="top">
		<span id="sc2back1" data-dojo-type="dojox/mobile/ToolBarButton" arrow="left" 
		data-dojo-props="target: 'configuration,ScrollableListSelection', url: '#configuration,ScrollableListSelection', transitionDir: -1">Back</span>
		<span data-dojo-type="dojox/mobile/ToolBarButton" id="sc2insert1x" data-dojo-props='icon:"mblDomButtonWhitePlus"' style="float:right;">1</span>
		<span data-dojo-type="dojox/mobile/ToolBarButton" id="sc2insert10x" data-dojo-props='icon:"mblDomButtonWhitePlus"' style="float:right;">10</span>
		<span data-dojo-type="dojox/mobile/ToolBarButton" id="sc2remove10x" data-dojo-props='icon:"mblDomButtonWhiteMinus"' style="float:right;">10</span>

	</h1>

	<div data-dojo-type="dojox/app/widgets/Container" data-app-constraint="center" data-dojo-props="scrollable: true">

		<div class="field-title">Should scroll between the header and footer, this text will also scroll.</div>

		<form name="repeatTestForm">
				<ul
					data-dojo-type="dojox/mobile/RoundRectList"
					data-dojo-mixins="dojox/mvc/WidgetList,dojox/mvc/_InlineTemplateMixin"
					data-dojo-props="children: this.loadedModels.repeatmodels.model"
					data-mvc-child-type="dojox/mvc/Templated"
					data-mvc-child-mixins="dojox/mobile/ListItem"
					data-mvc-child-props="clickable: true,
							transitionOptions: {title:'Details',target:'repeatDetails',url:'#repeatDetails',params:{'cursor':this.indexAtStartup}},
							onClick: function(){scrollableTestApp.setDetailsContext(this.indexAtStartup);}">
					<script type="dojox/mvc/InlineTemplate">
						<li data-dojo-type="dojox/mobile/ListItem">
							<div data-dojo-type="dojox/mobile/ToolBarButton"
								data-dojo-props="icon: 'mblDomButtonRedCircleMinus',preventTouch: true, indexAtStartup: this.indexAtStartup,
													onClick: function(e){ /*console.log(this); console.log(this.indexAtStartup);console.log(e);*/
																		scrollableTestApp.removeScrollableItem(this.indexAtStartup); return false; }"
								style="float: left; color: white; background-color: transparent; background-image: none; border: none;"></div>
							<div class="mblListItemLabel" style="display: block;" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at('rel:', 'First')"></div>	
						</li>
					</script>
				</ul>
		</form>
	</div>
	<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="label: 'Scrollable List Two Footer Bar'" data-app-constraint="bottom"></h1>
</div>