I have made a simple enyo app to teat scrolling. It scrolls vertically, but not horizontal. Allso the documentation says you must set the scroll size. The example code usses flex: 1 for the size, could somebody explain how this works.
code enyo.kind({ name: "MyApps.MainApp", kind: enyo.VFlexBox, components: [ {kind: "PageHeader", content: "Scroll"}, {name:"curValue", content:("Sample Text")}, {kind: "Button", caption: "Action", onclick: "btnClickA"},
{kind: "Scroller", flex: 1, onScrollStart: "btnClick", components: [
{ content:("Sample Text1")},
{ content:("Sample Text2")}
]}
], btnClick: function() { this.$.curValue.setContent("Start Scroll"); // handle the button click },
btnClickA: function() {
this.$.curValue.setContent("Button click"); // handle the button click
} });
The 'flex' value refers to the proportion of the parent FlexBox that the specified child takes up. You should read up on FlexBoxes to get a little better idea. In the absence of other controls flex: 1 indicates the control should take up all of the parent's space. If two controls were in the FlexBox and both were flex: 1 then they would equally share the parent's space. If one was flex: 2 then it would take up twice (2x1) the space as the flex: 1 control. In other words, the flex value sets the relative proportion of the parent (less any non-flexed controls) that a child takes up.
What I believe you are missing is that you must put something inside the scroller that's wider than the width of the scroller, otherwise... there's nothing to scroll! Hope that helps.