在操作脚本中指定datagrid列的percentColWidth

时间:2011-05-16 22:14:27

标签: flex actionscript-3 flex3

尝试

col.setStyle('percentWidth',20) //doesn't work

col.setStyle('percentWidth',0.2)//doesn't work

&安培;&安培;

col.percentWidth //doesnt compile

其中col是数据网格中的一列

感谢。

4 个答案:

答案 0 :(得分:4)

使用以下扩展数据网格:

package {
import mx.controls.DataGrid;
import mx.events.DataGridEvent;

public class ExDataGrid extends DataGrid {

    //--------------------------------------
    //   Constructor 
    //--------------------------------------

    public function ExDataGrid() {
        super();
        addEventListener(DataGridEvent.COLUMN_STRETCH, onColumnStretch);
    }

    //------------------------------------------------------------------------------
    //   Properties 
    //------------------------------------------------------------------------------

    //--------------------------------------
    //   Private 
    //--------------------------------------

    /**
     * @private
     * Keeps track of whether the columns have been manually adjusted or not. If they
     * have, then do not apply the columnWidths that have been specified.
     */
    private var _columnsAdjusted : Boolean = false;

    /**
     * @private
     * Storage for the columnWidths property.
     */
    private var _columnWidths : Array = new Array();

    /**
     * @private
     */
    private var _columnWidthsChanged : Boolean = false;

    /**
     * @private
     * Stores the explicit width portions of the column widths.
     */
    private var _explicitColWidths : Object;

    /**
     * @private
     * Stores the percentage width portions of the column widths.
     */
    private var _percentColWidths : Object;

    //--------------------------------------
    //   Getters / Setters 
    //--------------------------------------

    public function get columnWidths() : Array {
        return _columnWidths;
    }

    /**
     * Sets the widths of each of the columns. The widths can either be percentages or
     * explicit widths. For each column in the DataGrid, there should be a column width
     * value. The column widths should be expressed as strings.
     *
     * If there are 4 columns and we want the 1st column to be 40% width, the 2nd column
     * to be 60% width, the 3rd column to be a fixed width of 200, and the 4th column to
     * be a fixed width of 300. Then we would set the columnWidths property to be:
     * ['40%', '60%', 200, 300]
     */
    public function set columnWidths(values : Array) : void {
        if (_columnWidths != values) {
            _columnWidths = values;
            _columnWidthsChanged = true;

            invalidateProperties();
            invalidateDisplayList();
        }
    }

    //------------------------------------------------------------------------------
    //   Functions  
    //------------------------------------------------------------------------------

    //--------------------------------------
    //   Protected 
    //--------------------------------------

    /**
     * @private
     */
    override protected function commitProperties() : void {
        super.commitProperties();

        if (_columnWidthsChanged) {
            splitPercentWidths(columnWidths);
            _columnWidthsChanged = false;
        }
    }

    /**
     * @private
     * Sizes each of the columns in the DataGrid based on the columnWidths property,
     * unless the user has manually resized the columns, then the column widths will
     * not be adjusted.
     */
    override protected function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void {
        // Determine how much width is left over for percentage calculations after the fixed
        // widths are allocated.
        var leftoverWidth : Number = unscaledWidth;

        for each (var explicitColWidth : Number in _explicitColWidths) {
            leftoverWidth -= explicitColWidth;
        }

        // Manually adjust the column width before doing super.updateDisplayList. This way when 
        // super.updateDisplayList is called, it can perform any minor adjustments to the columns, 
        // but the column widths will still be pretty consistant with the specified widths.
        if (columns && columnWidths && !_columnsAdjusted && columns.length == columnWidths.length) {
            for (var i : int = 0; i < columnWidths.length; i++) {
                var w : Number = 0;

                if (_explicitColWidths[i]) {
                    w = _explicitColWidths[i];
                }
                else {
                    w = leftoverWidth * (_percentColWidths[i] / 100);
                }

                // Adjust the column's width. After digging through the DataGridColumn, I found 
                // 3 different properties that need to be set to override the default column width 
                // calculations performed by DataGrid and DataGridColumn. They are _width (changed 
                // in the setWidth method), explicitWidth, and preferredWidth.
                columns[i].setWidth(w);
                columns[i].explicitWidth = w;
                columns[i].preferredWidth = w;
            }
        }

        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    //--------------------------------------
    //   Private 
    //--------------------------------------

    /**
     * @private
     */
    private function onColumnStretch(event : DataGridEvent) : void {
        _columnsAdjusted = true;
    }

    /**
     * Called from the <code>commitProperties()</code> method to break up the columnWidths
     * into percentage based widths and explicit widths.
     *
     * When we calculate the percentage widths in <code>updateDisplayList()</code> we need
     * to know the remaining available width after explicit widths are subtracted.
     */
    private function splitPercentWidths(values : Array) : void {
        if (columns && columnWidths && columnWidths.length > 0) {
            _percentColWidths = new Object();
            _explicitColWidths = new Object();

            for (var i : uint = 0; i < columnWidths.length; i++) {
                var columnWidth : String = columnWidths[i] + "";

                // If columnWidth contains a '%' then it is a percentage width, otherwise
                // it is an explicit width.
                if (columnWidth.indexOf("%") == -1) {
                    _explicitColWidths[i] = Number(columnWidth);
                }
                else {
                    _percentColWidths[i] = Number(columnWidth.substr(0, columnWidth.length - 1));
                }
            }
        }
    }
}
}

使用以下语法将所有列宽指定为分配给'columnWidths'的数组:

 columnWidths = ['70%','30%','100'];

正常处理没有%符号的宽度。

答案 1 :(得分:1)

数据网格上没有“percentWidth”(我知道)。您可以编写一些代码来手动执行,即:将宽度设置为.1 * dataGrid.width为10%,但这显然有点烦人。我过去使用过这个解决方案。

我做了一个快速谷歌搜索,发现以下链接,其中一个人扩展了DataGrid类,以获得我认为你正在下沉的功能。你可以在这里查看他的文章:

ScalableDataGrid

我没有尝试使用它,所以我很想知道它是否有效。

祝你好运。

答案 2 :(得分:0)

我请你告诉我们“不工作”是指什么;但由于percentageWidth不是DataGridColumn类的属性,我怀疑你的意思是你看到编译器错误?

如果要使用百分比调整dataGrid列的大小,则可能需要扩展DataGrid并自行编写列大小调整代码。

答案 3 :(得分:0)

像其他海报所说的那样,mx DataGridColumn上没有percentWidth属性,但是可以这样做,你需要扩展Flex DataGrid。见http://www.flexicious.com/Home/DemoFlex4,例9。

应用列宽时要记住的一件事是确保在设置列宽之前将horizo​​ntalScrollPolicy设置为“on”。

我们实际上在DataGrid的扩展上提供了percentWidth属性。实施起来非常简单:

1)计算出网格的总宽度 2)根据percentWidth值除以它 3)将horizo​​ntalScrollPolicy设置为on 4)应用计算的宽度 5)将horizo​​ntalScrollPolicy设置回原来的状态。

这对我们有用,所以它应该适合你。请在此处发布,即使遵循上述伪代码或将HSCP设置为“on”,它也不适用宽度,我们可以尝试协助!