Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26972

ScrollableView inside ListView not working when using Alloy

    Details

    • Type: New Feature
    • Status: Open
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: None

      Description

      The following Alloy code does not show the Views inside the Scrollable view:

      <Alloy>
      	<Window>
      		<ListView id='list' height="Ti.UI.FILL" width="Ti.UI.FILL">
      			<Templates>
      				<ItemTemplate name='bannerTemplate' class='localItemSize'>
      					<ScrollableView id='bannersScrollable' height="200" width="Ti.UI.FILL" backgroundColor="maroon">
      						<View backgroundColor='white' height="100" width="Ti.UI.FILL"/>
      						<View backgroundColor='blue' height="100" width="Ti.UI.FILL"/>
      					</ScrollableView>
      				</ItemTemplate>
      			</Templates>
       
      			<ListSection id='titleSection'>
      				<ListItem template='bannerTemplate'/>
      				<ListItem template='bannerTemplate'/>
      				<ListItem template='bannerTemplate'/>
      				<ListItem template='bannerTemplate'/>
      				<ListItem template='bannerTemplate'/>
      				<ListItem template='bannerTemplate'/>
      			</ListSection>
      		</ListView>
      	</Window>
      </Alloy>
      

      But when you create it through code it will show the views inside the ScrollableView:

      var win = Ti.UI.createWindow({
          backgroundColor: "#000"
      });
       
      var scrollableViewTemplate = {
      	childTemplates: [{
      		type: 'Ti.UI.ScrollableView',
      		bindId: 'scrollableView',
      		properties: {
      			height: 200,
      			views: [
      				Ti.UI.createView({
      					backgroundColor: 'red'
      				}),
      				Ti.UI.createView({
      					backgroundColor: 'blue'
      				}),
      				Ti.UI.createView({
      					backgroundColor: 'green'
      				})
      			]
      		}
      	}]
      };
       
      var items = [{
      	template: 'scrollableView'
      }];
       
      for (var i = 0; i < 40; i++) {
      	items.push({
      		properties: {
      			title: 'Item',
      			height: 50
      		}
      	});
      }
       
      var section = Ti.UI.createListSection({
      	items: items
      });
       
      var listView = Ti.UI.createListView({
      	templates: {
      		'scrollableView': scrollableViewTemplate
      	},
      	sections: [section]
      });
       
      win.add(listView);
      win.open();
      

      From looking at the converted Alloy->JS code you can see that is assigning an empty array to the views section but the child views never get pushed into this array.

      Tested it with Ti SDK 7.5.1 on Android 7

        Attachments

          Activity

            People

            • Assignee:
              emerriman Eric Merriman
              Reporter:
              michael Michael Gangolf
            • Watchers:
              6 Start watching this issue

              Dates

              • Created:
                Updated:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Source Code