在网格组件中对齐 dataGrid。

Posted 2023-02-23

【中文标题】在网格组件中对齐 dataGrid。

【英文标题】：aligning a dataGrid in a grid component.

【发布时间】：2011-10-16 00:15:13

【问题描述】：

请在下面的代码中，我想将 gridItem 中的数据网格与实例“row5”对齐，以便它与实例“row3”和“row4”中的其他 textInput 对齐？

感谢您提出的任何建议..

 <mx:Grid paddingTop="4" paddingLeft="4">
    <mx:GridRow id="row1">
        <mx:GridItem>
            <s:Label text="Description:" 
                     paddingTop="5"/>
        </mx:GridItem>
        <mx:GridItem>
            <s:TextArea id="descTI"  />
        </mx:GridItem>
    </mx:GridRow>

    <mx:GridRow id="row2">
        <mx:GridItem>
            <s:Label text="Name:" 
                     paddingTop="5"/>
        </mx:GridItem>
        <mx:GridItem colSpan="3">
            <s:TextInput id="nameTI" />
        </mx:GridItem>
    </mx:GridRow>

    <mx:GridRow id="row3">
        <mx:GridItem>
            <s:Label text="Target:" 
                     paddingTop="5"/>
        </mx:GridItem>
        <mx:GridItem colSpan="3">
            <s:TextInput id="targetTI" />
        </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow id="row4">
        <mx:GridItem>
            <s:Label text="Through level:" 
                     paddingTop="5"/>
        </mx:GridItem>
        <mx:GridItem colSpan="3">
            <s:TextInput id="throughLevTI"  />
        </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow id="row5">
        <mx:GridItem colSpan="4">
            <s:Label text="Operand:" 
                     paddingTop="5" />
            <mx:DataGrid id="attrDG">
                <mx:columns>
                    <mx:DataGridColumn dataField="variable" 
                                       />
                    <mx:DataGridColumn dataField="level" 
                                       />
                </mx:columns>
            </mx:DataGrid>
        </mx:GridItem>
    </mx:GridRow>
</mx:Grid>

【问题讨论】：

这个标记是你创建的吗？当最大列数为 2 时，为什么几乎每一行都需要 colSpan="3"？

最大列数是2？我不明白。这是否意味着一个 colspan 不能大于 2？

与 html 相比，mx:GridRow 适用于 tr，mx:GridItem 适用于 td（列）。 mx:GridItem 的行数不超过 2。因此，您的列数不超过 2。

这就是数据网格与其他 textInput 组件不对齐的原因吗？

不知道。为了解决您的问题，我需要了解问题。但现在我什至根本无法理解事物。第一步是把现有的事情做好。这样就更容易提取和解决问题了。

【参考方案1】：

检查此代码： 对 GridItem、colspan 和 width 进行一些调整，您就完成了。

<mx:Grid paddingTop="4" paddingLeft="4">  
    <mx:GridRow id="row1"> 
        <mx:GridItem>        
            <s:Label text="Description:"  paddingTop="5"/> 
        </mx:GridItem>     
        <mx:GridItem>      
            <s:TextArea id="descTI"  /> 
        </mx:GridItem> 
    </mx:GridRow>    
    <mx:GridRow id="row2">  
        <mx:GridItem>        
            <s:Label text="Name:" paddingTop="5"/>   
        </mx:GridItem>        
        <mx:GridItem>     
            <s:TextInput id="nameTI" />  
        </mx:GridItem>   
    </mx:GridRow>   
    <mx:GridRow id="row3">  
        <mx:GridItem>        
            <s:Label text="Target:" paddingTop="5"/> 
        </mx:GridItem>      
        <mx:GridItem> 
            <s:TextInput id="targetTI" />     
        </mx:GridItem>   
    </mx:GridRow>    
    <mx:GridRow id="row4"> 
        <mx:GridItem>       
            <s:Label text="Through level:" paddingTop="5"/>  
        </mx:GridItem>        
        <mx:GridItem> 
            <s:TextInput id="throughLevTI"  />       
        </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" />           
                    <mx:DataGridColumn dataField="level"           
                                       />       
                </mx:columns>       
            </mx:DataGrid>    
        </mx:GridItem>   
    </mx:GridRow> 
</mx:Grid>

【讨论】：

是否可以添加另一个与 dataGrid 水平对齐的 dataGrid 并且新的 dataGrid 是 paddedLeft = 3？如果是的话，你能修改代码让我有两个水平对齐的数据网格，间隔为3吗？谢谢

@Henry 您可以通过将第二个数据网格放入另一个 DataGridItem 并将 paddingLeft 设置为 3 来做到这一点。然后将其他 gridRows 的 colspan 设置为 2。