Re: [FlexJS] vertical layout not working with labels

[Justin Mclean]

Hi,

> How about giving the Express package a whirl. Try the VView component
> which packages up the vertical layout with data binding.

I tried this:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
               xmlns:js="library://ns.apache.org/flexjs/express">

   <js:initialView>
       <js:View>
           <js:VContainer>
               <js:Label text="hello"/>
               <js:Label text="world"/>
           </js:VContainer>
       </js:View>
   </js:initialView>

</js:Application>


And it get an exception on startup:
Uncaught TypeError: c is not a constructor
   at 
org.apache.flex.html.supportClasses.ScrollingViewport.org.apache.flex.html.supportClasses.Viewport.set__strand
 (Viewport.js:127)
   at org.apache.flex.html.supportClasses.ScrollingViewport.set__strand 
(ScrollingViewport.js:100)
   at 
org.apache.flex.express.VContainer.org.apache.flex.core.UIHTMLElementWrapper.addBead
 (UIHTMLElementWrapper.js:68)
   at org.apache.flex.express.VContainer.org.apache.flex.core.UIBase.addBead 
(UIBase.js:362)
   at org.apache.flex.express.VContainer.org.apache.flex.express.Container [as 
constructor] (Container.js:25)
   at Function.childCtor.base (base.js:2442)
   at new org.apache.flex.express.VContainer (VContainer.js:23)
   at Function.org.apache.flex.utils.MXMLDataInterpreter.generateMXMLArray 
(MXMLDataInterpreter.js:123)
   at Function.org.apache.flex.utils.MXMLDataInterpreter.generateMXMLInstances 
(MXMLDataInterpreter.js:260)
   at 
org.apache.flex.express.View.org.apache.flex.core.ContainerBase.addedToParent 
(ContainerBase.js:173)

I tried this
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
               xmlns:js="library://ns.apache.org/flexjs/express">

   <js:initialView>
       <js:VView>
           <js:Label text="hello"/>
           <js:Label text="world"/>
       </js:VView>
   </js:initialView>

</js:Application>

And it gave me the this HTML (which places them side by side). it’s being 
concisely wrong at least :-)
<div class="flexjs" style="display: block; position: relative;"><span 
class="Label" style="white-space: nowrap; cursor: default; pointer-events: 
none;">hello</span><span class="Label" style="white-space: nowrap; cursor: 
default; pointer-events: none;">world</span></div>

Thanks,
Justin