Flex: Parse error: '<s:Button>' is not allowed to follow '</s:Button>'

The subject says it all. My simplified code is below:

<mx:DataGrid id="gridFields" width="100%">
  <mx:columns>
    <mx:DataGridColumn dataField="name" 
                       headerText="Name" />

    <mx:DataGridColumn dataField="description"
                       headerText="Description"/>

    <mx:DataGridColumn>
      <mx:itemRenderer>
        <fx:Component>
            <!--these two buttons are the problem-->
            <s:Button id="btnDeleteField"
                          label="Delete" 
                          c开发者_运维问答lick="outerDocument.deleteField(event)" />
            <s:Button id="btnEditField"
                      label="Edit"
                      click="outerDocument.editField(event)" />
        </fx:Component>
      </mx:itemRenderer>
    </mx:DataGridColumn>
  </mx:columns>
</mx:DataGrid>

You can only place one primary component inside an <fx:Component> ... </fx:Component> block, since you are technically extending (in the OOP sense) whatever class you use. What you did is loosely the equivalent of writing MyComponent extends Button extends Button in ActionScript.

Instead, try placing the two buttons inside a single container, eg. a Group or BorderContainer.

Solved my problem by doing the following

<mx:DataGridColumn>
  <mx:itemRenderer>
    <fx:Component>
      <s:MXDataGridItemRenderer>
        <s:HGroup>
          <mx:Button label="Aaa"/>  
          <mx:Button label="Bbb" />
        </s:HGroup>
      </s:MXDataGridItemRenderer>
    </fx:Component>
  </mx:itemRenderer>
</mx:DataGridColumn>