Flex empty mx:AdvansedDataGrid 添加列后增加她的大小

Posted 2023-02-23

【中文标题】Flex empty mx:AdvansedDataGrid 添加列后增加她的大小

【英文标题】：Flex empty mx:AdvansedDataGrid after add columns increase her size

【发布时间】：2013-12-04 01:33:01

【问题描述】：

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

在此代码块中，在 dataGrid 中创建了具有 59 列且没有数据的 AdvancedDataGrid。她的宽度等于 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)"
                >
    <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"  >            
              <mx:AdvancedDataGrid id="dataGrid"
                                           horizontalScrollPolicy="auto"
                                            
                                           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 中。

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

【参考方案1】：

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

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

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

【讨论】：

这没有帮助，因为然后我将列插入网格，所有应用程序都会增加她的大小，this.width 将等于 dataGrid.width

您是将其构建为 AIR 还是作为 Web 页面的 Flex？

这是 Flex Web 应用程序。我为这个问题找到了几个解决方案（为所有应用程序元素设置垂直布局或为网格设置直接大小，但这个决定会产生新问题......），但这对我没有帮助，因为应用程序结构，但这没关系.

【参考方案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)"
          >            
    <mx:AdvancedDataGrid id="dataGrid"
                         horizontalScrollPolicy="auto"
                          
                         columns="columnsData"/>
    <s:HGroup paddingBottom="10" paddingTop="10">
        <s:Button label="Add Columns" click="button1_clickHandler(event)"/>
    </s:HGroup>
</s:VGroup>