Question

我对我认为必须是一个微不足道的问题感到难过。我有一个面板，其中包含一个数据网格（预计会流畅地填满大部分房地产），还有一些按钮和文本字段固定在面板的底部边缘。它是一个经典的数据网格+搜索组合。我坚持的是，虽然数据网格将成长为大的“视口”，但在缩小到约600像素左右后，数据网格的高度停止缩小，将底部固定的内容推离屏幕。我玩了minHeight的各种设置，虽然更大的设置工作（同样，奇怪的是，覆盖它所属的底部固定的东西，而不是屏幕外）。由于某种原因，较小的设置显然被忽略或覆盖。

似乎必须有某种我需要做的设置，但我现在已经搞乱了几个小时了，我只是希望你们中的一个确切地知道问题是什么。我现在的问题是我不知道还有什么可以尝试的！

这里有一些截图，首先是设计预览，第二是浏览器渲染。您可以看到底部的按钮行是如何被切断的，如果我进一步缩小窗口，我也会切断部分数据网格。

The 'design' preview the browser rendering

谢谢！

编辑：这是我的测试应用程序的代码，其中所有行为都应该是......并且层次结构完全模仿我的测试应用程序中发生的事情（直接从中复制/粘贴）。

<?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" width="100%" height="100%">


<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]private var _data:ArrayCollection;
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>




<s:Group  width="100%" height="100%">   

    <s:BorderContainer  width="100%" height="100%"
                        backgroundColor="silver"
                        cornerRadius="8"
                        borderStyle="inset" borderWeight="1"
                        >

        <!--Main application viewstack-->
        <mx:ViewStack  width="100%" height="100%" >



            <s:NavigatorContent width="100%" height="100%">

                <!--sub-application viewstack-->
                <s:Group width="100%" height="100%">

                    <mx:ViewStack id="vs" width="100%" height="100%" x="0" y="0"  >


                        <s:NavigatorContent width="100%" height="100%">
                            <s:Group width="100%" height="100%">



                                <s:Panel 
                                    minHeight="170"
                                    title="Order Entry—Customer    [Search for existing contacts...]" height="100%" width="100%">

                                    <s:Scroller width="100%" height="100%">
                                        <s:Group clipAndEnableScrolling="true">

                                            <mx:DataGrid 
                                                id="dgSelect" 
                                                dataProvider="{_data}" 
                                                sortableColumns="false" resizableColumns="true"  draggableColumns="false"
                                                doubleClickEnabled="true" 
                                                allowMultipleSelection="false" 
                                                minHeight="68"
                                                top="4" bottom="70" left="4" right="4">
                                                <mx:columns>
                                                    <mx:DataGridColumn headerText="Last Name" dataField="LName" width="100" />
                                                    <mx:DataGridColumn headerText="First Name" dataField="FName"  width="100" />
                                                    <mx:DataGridColumn headerText="Address" dataField="Address1"  width="250" />
                                                    <mx:DataGridColumn headerText="City" dataField="City"  width="100" />
                                                    <mx:DataGridColumn headerText="State" dataField="State" width="50" />
                                                    <mx:DataGridColumn headerText="Zip" dataField="Zip"  width="50" />
                                                    <mx:DataGridColumn headerText="Email" dataField="EMail" />
                                                </mx:columns>
                                            </mx:DataGrid>

                                            <s:Group bottom="40" left="4" width="100%" height="21">
                                                <s:Label text="Last"  width="41" height="22" verticalAlign="middle"/>
                                                <s:TextInput id="txtSearchLast" maxChars="9"  width="100" left="41"/>

                                                <s:Label text="First"  width="36" verticalAlign="middle" left="185" height="21"/>
                                                <s:TextInput id="txtSearchFirst" maxChars="9" width="100" left="220"/>

                                                <s:Label id="lblSearchError" color="#FF0000" fontSize="10" left="336" right="158"/>
                                                <mx:Spacer width="100%"/>
                                                <s:Button id="btnSearchSelect" label="Select"  right="80"/>
                                                <s:Button id="btnSearchEdit"   label="Edit"    right="4"/>

                                            </s:Group>




                                            <s:Group bottom="10" height="21">
                                                <s:layout >
                                                    <s:HorizontalLayout paddingLeft="10" paddingRight="10"/>
                                                </s:layout>

                                                <mx:Button id="btnCancel"  label="Cancel" />    
                                                <mx:Spacer/>
                                                <mx:Button id="btnStartOver"  label="Start Over" />
                                                <mx:Spacer/>
                                                <mx:Button id="btnExpressContact"  label="Express Contact"/>
                                                <mx:Button id="btnExpressCart" label="Ω" />
                                                <mx:Spacer/>
                                                <mx:Button  id="btnCustomerNew"   label="New Customer"      />  
                                                <mx:Spacer/>                    
                                                <mx:Button id="btnNext"   label="Next"     />

                                            </s:Group>

                                        </s:Group>
                                    </s:Scroller>


                                </s:Panel>
                            </s:Group>
                        </s:NavigatorContent> 

                    </mx:ViewStack> 
                </s:Group>
            </s:NavigatorContent> 

        </mx:ViewStack>





    </s:BorderContainer>
</s:Group>

</s:Application>

Answer 1

我认为，稍微安静的代码会有所帮助。你如何实现你的视口？您在哪里设置滚动条。什么是layoutproperty等等。

据我所知，你正在编写一个带有flex4和spark组件的应用程序，对吗？

您必须在应用程序中为滚动条定义一个滚动条（视口）。 Spark组件没有像halo组件那样的自动滚动条。

多种可能性之一是为应用程序定义外观。在此外观中，编写内容组周围的滚动条。在此之后，将hight和width属性设置为100％。

也许这可以帮助没有代码

见到你弗兰克

datagrid和minHeight属性

1 个答案: