Flex:Error: addChild() is not available in this class

Flex中，由于需求需要，需要动态创建多个<s:NavigatorContent>，google了半天，没有这方面的内容，大部分的都是固定的写死了有几个tab，panel它的个数是不定的，所以就考虑重写个<mx:ViewStack> 的component用来适应这种需求。

 

code：

 

package ui.accelerators.defineLandscape
{ 
 import com.sap.rdssbs.entity.LandScape;
 import com.sap.rdssbs.entity.System;
 import com.sap.rdssbs.manager.ProjectManager;
 
 import mx.containers.ViewStack;
 
 import spark.components.Group;
 import spark.components.HGroup;
 import spark.components.Label;
 import spark.components.NavigatorContent;
 import spark.components.Scroller;
 import spark.components.VGroup;
 import spark.layouts.VerticalLayout;
 
 import ui.components.Panel;

 public class CustomViewStack extends ViewStack
 {
  private static const WIDTH:int = Number("100%");
  private static const HEIGHT:int = WIDTH;
  public function CustomViewStack(){
   super();
   this.width = WIDTH;
   this.height = HEIGHT;
   this.creationPolicy = "all";
   
   for each (var landscape:LandScape in ProjectManager.getInstance().currentProject.landscapes) {
    var naviCont:NavigatorContent = new NavigatorContent();
    naviCont.label = landscape.name;
    naviCont.width = WIDTH;
    naviCont.height = HEIGHT;
    
    var scroll:Scroller = new Scroller();
    scroll.width = WIDTH;
    scroll.height = HEIGHT;
    
    var group:Group = new Group();
    group.width = WIDTH;
    
    var verticalLayout:VerticalLayout = new VerticalLayout();
    group.layout = verticalLayout;
    
    for each (var sys:System in landscape.systems) {
     var panel:Panel = new Panel();
     panel.title = sys.name;
     panel.layout = verticalLayout;
     
     var hgroup:HGroup = new HGroup();
     hgroup.width = WIDTH;
     hgroup.paddingLeft = 20;
     hgroup.paddingTop = 22;
     hgroup.paddingBottom = 22;
     hgroup.paddingRight = 20;
     
     var vgroup:VGroup = new VGroup();
     vgroup.width = WIDTH;
     vgroup.height = HEIGHT;
     
     var label:Label = new Label();
     label.text = "System Information";
     label.styleName = "headline";
     vgroup.addChild(label);
     
     var proxyForm:ProxyForm = new ProxyForm();
     //proxyForm.id = "";
     vgroup.addChild(proxyForm);
     hgroup.addChild(vgroup);
     panel.addChild(hgroup);
     group.addChild(panel);
    }    
    
    //scroll.addChild(group);
    //scroll.addElement(group);
    scroll.viewport = group;
    naviCont.addChild(scroll);
    this.addChild(naviCont);
   }
   
  }
      
 }
}

 

在mxml中，只需要引用到该类文件即可、、、

 

但是，code是完了，问题也就来了、、、

 

最先出来的是scroll.addChild(group); 这句，报错如下：

 

Error: addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one.

 

于是乎，就改成了如下一句：

scroll.addElement(group);

 

又报错如下：

ArgumentError: This operation is not supported.

 

最后定位到

scroll.addElement(group);

 

网上搜了一下，说是scroller里面不允许使用addElement 和addElementAt两个方法，查看源代码发现，只要一使用这两个方法，他就会抛出错误：

 

 
正确的做法如下：

 

应该是用viewport

 

所以正确的语句如下：

 

scroll.viewport = group;

 

最后，as文件中的最后几行代码正确的做法如下：

 

//scroll.addChild(group);
//scroll.addElement(group);
scroll.viewport = group;
naviCont.addChild(scroll);
this.addChild(naviCont);

 

===========================>>>>

scroll.viewport = group;
naviCont.addElement(scroll);
this.addChild(naviCont);

http://stackoverflow.com/questions/5983889/how-to-populate-a-mxviewstack-dynamically-with-a-dataprovider-for-a-tabbed-navig