Question

I wanted to use the Spark Grid but at the same time I realized there are no Spark equivalents for certain components like the <GridItem>.
So, I mixed both Spark and Halo components in the program but when I ran it, I got the error:

“TypeError: Error #1034: Type Coercion failed: cannot convert spark.components::Grid@239b40a1 to mx.containers.Grid.”

The program:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<s:Grid>  
    <mx:GridRow id="row1"> 
        <mx:GridItem>        
            <s:Label text="Description:"  paddingTop="5"/> 
        </mx:GridItem>     
        <mx:GridItem>      
            <s:TextArea id="descTI" width="300" height="50"/> 
        </mx:GridItem> 
    </mx:GridRow>    
    <mx:GridRow id="row2">  
        <mx:GridItem>        
            <s:Label text="Name:" paddingTop="5"/>   
        </mx:GridItem>        
        <mx:GridItem>     
            <s:TextInput id="nameTI" width="300"/>  
        </mx:GridItem>   
    </mx:GridRow>   
    <mx:GridRow id="row3">  
        <mx:GridItem>        
            <s:Label text="Target:" paddingTop="5"/> 
        </mx:GridItem>      
        <mx:GridItem> 
            <s:TextInput id="targetTI" width="300"/>     
        </mx:GridItem>   

    </mx:GridRow>  
    <mx:GridRow id="row5">   
        <mx:GridItem>  
            <s:Label text="Operand:" paddingTop="5" />  
        </mx:GridItem>   
        <mx:GridItem> 
            <mx:DataGrid id="attrDG">    
                <mx:columns>          
                    <mx:DataGridColumn dataField="variable" width="150"/>           
                    <mx:DataGridColumn dataField="level"           
                                       width="150"/>       
                </mx:columns>       
            </mx:DataGrid>    
        </mx:GridItem> 

        <mx:GridItem paddingLeft="3" colSpan="2"> 
            <mx:DataGrid id="attrDG0">    
                <mx:columns>          
                    <mx:DataGridColumn dataField="variable" width="150"/>           
                    <mx:DataGridColumn dataField="level"           
                                       width="150"/>       
                </mx:columns>       
            </mx:DataGrid>    
        </mx:GridItem>  
    </mx:GridRow> 
</s:Grid>
</s:Application>

Answer 1

The spark.components.Grid is not meant to replace the mx.containers.Grid. Rather, it’s immediate use is as a component of the spark.components.DataGrid component, which is meant to render items in a data provider which implements an IList. See the language reference documentation on the Spark Grid for more details.

You should continue to use the mx:Grid. You can even find examples of it being used in the official Using Flex 4.5 reference: MX Grid layout container.

I will offer the observation, however, that you might also want to look at the s:Form container. The manner in which you are laying out the first three rows seems to me more suited to the use case the Form was designed for.

Finally, the s:DataGrid is intended to replace the mx:DataGrid. So you should make sure to use that.