enyo, how to have pans with more then one control

Question

I'm just learning enyo, and made a simple program to use pans. Right now each pan is a button. Is there a way to have like a bunch of controls in each pan, instead of one? example on my code the first pan has a button called butA, could it have 3 buttons? my code

enyo.kind({
    name: "MyApps.MainApp",
    kind: enyo.VFlexBox,
    components: [
       {kind: "PageHeader", content: "Template"},
       {kind: "Pane", transitionKind: "enyo.transitions.LeftRightFlyin", components: [
           {kind: "Button", name:"butA", caption: "Pane A", onclick: "btnClickA"},
           {kind: "Button", name:"butB",caption: "Pane B", onclick: "btnClickB"}
       ]}
   ],
   /// code to switch pans
   btnClickA: function() {
       this.$.pane.selectView(this.$.butB);
   },

   btnClickB: function() {
       this.$.pane.selectView(this.$.butA);//k
   },
});

Answer 1

You certainly can. The pane creates a view for each object in its components array, but these components can contain sub-components. For example, suppose you wanted to make views, each with two buttons, within one pane, you could use something like this:

...
{kind:enyo.Pane, components:[
    {kind:enyo.VFlexBox, name:"View1", components:[
        {kind:enyo.PageHeader, content:"Pane One"},
        {kind:enyo.Button, caption:"Button One"},
        {kind:enyo.Button, caption:"Button Two"},
    ]},
    {kind:enyo.VFlexBox, name:"View2", components:[
        {kind:enyo.PageHeader, content:"View Two"},
        {kind:enyo.Button, caption:"Button One"},
        {kind:enyo.Button, caption:"Button Two"},
    ]},
]},
....