Question

我有一个AdvansedDatGrid，包含空数据和更多列。网格的宽度和高度等于100％。我把这个网格放在100个宽度和高度的组中。如果我添加一些列，数据网格将更改其父容器的大小和大小。如果我在dataProvider中放入一些数据，而不是网格正确调整大小，那么只有当网格没有数据时才会出现错误。

在此代码块中创建AdvancedDataGrid，其中59列没有dataGrid中的数据。她的宽度等于5900px。单击“添加列”按钮，向网格添加10列。之后，网格增加了1000px的大小和父容器（testGroup）的大小。

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               initialize="application1_initializeHandler(event)"
               width="100%" height="100%">
    <fx:Script>
        <![CDATA[
        import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;

        [Bindable]
        private var columnsData:Array = [];
        //Create columns with number header
        private function createColumnsData():void {
                        var tempColumn:AdvancedDataGridColumn;

                        for (var i:int = 0; i < 59; i++) {
                            tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
                            tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
                            tempColumn.dataField = Math.floor(Math.random() * 200).toString();
                            columnsData.push(tempColumn);
                        }

                        dataGrid.columns = columnsData;
                    }

                    private function addColumns():void {
                        var tempColumn:AdvancedDataGridColumn;

                        for (var i:int = 0; i < 20; i++) {
                            tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
                            tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
                            tempColumn.dataField = Math.floor(Math.random() * 200).toString();
                            columnsData.push(tempColumn);
                        }

                        dataGrid.columns = columnsData;
                    }
        private function button1_clickHandler(event:MouseEvent):void {
            addColumns();
        }
        protected function application1_initializeHandler(event:FlexEvent):void {
    addColumns();
        }
        ]]>
    </fx:Script>
        <s:Group id="testGroup" width="100%" height="100%">            
              <mx:AdvancedDataGrid id="dataGrid"
                                           horizontalScrollPolicy="auto"
                                           width="100%" height="100%"
                                           columns="{columnsData}"/>
              <s:HGroup paddingBottom="10" paddingTop="10">
                <s:Button label="Add Columns" click="button1_clickHandler(event)"/>
              </s:HGroup>
        </s:Group>
</s:Application>

我在Flex漏洞数据库中看到并没有找到任何意义，但是这个问题就出现了。我使用Flex SDK 4.1.0。但是这个问题出现在Fles SDK 4.6.0中。

我尝试修复此错误，将直接宽度设置为Grid。这看起来很好并且bug消失了，但是如果我减小应用程序的大小，数据网格并没有减小她的大小，因为他有直接宽度而不是百分比宽度。

Answer 1

一种解决方案是向应用程序添加Resize侦听器：

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           width="100%" height="100%"
           resize="onResize(event)">
<fx:Script>
    <![CDATA[
    onResize(e:ResizeEvent):void {
        dataGrid.width=this.width;
    }
    //etc...
    ]]>
</fx:Script>

确保您的dataGrid始终具有直接宽度设置，并且无论您如何调整其大小，它都将始终设置为与应用程序相同的大小。

Answer 2

我找到解决方案：

将直接宽度设置为网格

添加调整大小侦听器

        [Bindable]
        private var columnsData:Array = [];
        //Create columns with number header
        private function createColumnsData():void {
            var tempColumn:AdvancedDataGridColumn;

            for (var i:int = 0; i < 59; i++) {
                tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
                tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
                tempColumn.dataField = Math.floor(Math.random() * 200).toString();
                columnsData.push(tempColumn);
            }

            dataGrid.columns = columnsData;
        }

        private function addColumns():void {
            var tempColumn:AdvancedDataGridColumn;

            for (var i:int = 0; i < 20; i++) {
                tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
                tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
                tempColumn.dataField = Math.floor(Math.random() * 200).toString();
                columnsData.push(tempColumn);
            }

            dataGrid.columns = columnsData;
        }
        private function button1_clickHandler(event:MouseEvent):void {
            addColumns();
        }

        protected function application1_initializeHandler(event:FlexEvent):void {
            addColumns();
        }

        protected function contentGroup_resizeHandler(event:ResizeEvent):void
        {
            if (this.width < dataGrid.getExplicitOrMeasuredWidth()) {
                dataGrid.width = this.width;
            }
        }
    ]]>
</fx:Script>
<s:VGroup id="testGroup" 
         resize="contentGroup_resizeHandler(event)"
         width="100%" height="100%">            
    <mx:AdvancedDataGrid id="dataGrid"
                         horizontalScrollPolicy="auto"
                         width="{testGroup.width}" height="100%"
                         columns="{columnsData}"/>
    <s:HGroup paddingBottom="10" paddingTop="10">
        <s:Button label="Add Columns" click="button1_clickHandler(event)"/>
    </s:HGroup>
</s:VGroup>

Flex空mx：添加列后AdvansedDataGrid会增加她的大小

2 个答案: