Flex DataGrid 列不会调整大小答案

【问题标题】：Flex DataGrid columns won't resizeFlex DataGrid 列不会调整大小
【发布时间】：2012-07-24 16:32:11
【问题描述】：

我在尝试调整 DataGrid 中的列大小时遇到严重问题。我已经搞了一天多，现在头疼得要命。

基本上，我有一个 TabNavigator 组件，其中包含 NavigatorContent 子组件。在每个 NavigatorContent 子项中，我都有一个 DataGrid，我将其宽度设置为 100%（这需要能够处理浏览器窗口的大小调整）。我在每个选项卡中使用出色的filterable DataGrid from Iwo Banas 作为DataGrid。

现在，我在每个 DataGrids 中使某些列可见/不可见，这工作正常。但是，我发现列宽设置不正确。每当我设置列宽（使用this 代码）时，所有列似乎都设置为正确的宽度，除了我最近使其可见的列和紧靠这些列左侧的列。最近显示的那些非常小（尽管我将它们的宽度设置为 30），而这些列左侧的那一列非常大（尽管我也将其宽度设置为 30）。

我认为这与 DataGrid 的生命周期有关，因为第一个 DataGrid 表现良好。当我点击其他选项卡时，我发现其他 DataGrid 的宽度没有正确设置。

但是，如果我“看到”其中一个问题 DataGrid（即它出现在屏幕上）并且调整列大小的代码再次运行，则列的大小是正确的。

我尝试了许多互联网上推荐的方法，包括下面列出的问题，但无济于事。

这是我用来调整列大小的代码（取自this 答案）

public static function resizeColumn(col:DataGridColumn, size:int):void
        {
                var owner:* = col.mx_internal::owner
                col.mx_internal::owner = null;

                col.width = size;

                col.mx_internal::owner = owner;
        }

我们将不胜感激。

我已经看过以下答案。 Flex DataGrid column width: one column to rule them all? Flex 3 DataGrid Column Width Problem Flex DataGrid Column Width（Unable to change the column width dynamically in flex datagrid

【问题讨论】：

您能否添加您所做的工作示例，以便我们可以帮助您而不是一小段代码。
我知道我通常应该包含比我已经包含的更多的示例代码，但我必须粘贴很多代码。有很多事情一起发生。我希望有人对生命周期和其他东西有一个通用的解决方案。无论如何，我最近找到了一个解决方案，我现在将发布。

标签： apache-flex actionscript

【解决方案1】：

所以，经过大量的头疼后，我终于找到了一个解决方案（至少对于我的问题，不确定它是否会帮助其他人，但我想我还是会在这里发布它，因为你永远不知道什么可以帮助别人否则）。

我决定既然在屏幕上显示 DataGrid 时调用调整大小代码是可行的，那么我只需要这样做。所以我想根据单击的选项卡放置相关 DataGrid 的调整大小代码。不是那么简单，因为似乎没有一种直接的方法来实现选项卡的点击处理程序。我快速谷歌了一下，找到了this 解决方案。

基本上，您通过循环浏览选项卡导航器的子项、获取按钮并添加事件侦听器，为每个选项卡按钮添加一个单击处理程序。

然后，你在处理程序中做你需要做的事情。

代码示例（与website 略有不同）：

        protected function tbGridArea_creationCompleteHandler(event:FlexEvent):void
        {
            for ( var i:int=0; i < tbGridArea.getChildren().length; i++ )
            {
                var tab:Object = tbGridArea.getTabAt(i);
                tab.addEventListener( FlexEvent.BUTTON_DOWN,myTabClickHandler );
            }
        }

        private function myTabClickHandler(event:Event):void {
            switch(event.currentTarget.label) {
            // do whatever you need to do here
            }
        }

【讨论】：