Динамическое изменение ширины столбца Datagrid в FLEX - PullRequest
3 голосов
/ 16 июня 2009

Можем ли мы динамически изменять ширину столбца таблицы данных, щелкая границу столбца, чтобы отобразить всю строку, которая слишком длинна для отображения и должна быть прокручена? Если да, то как?

Кроме того, как мы можем обеспечить динамическое изменение ширины столбца в зависимости от количества символов / длины строки; так как много раз данные слишком длинны для отображения. Можем ли мы установить ширину столбца, чтобы учитывать длину данных перед отображением на сетке данных?

Ответы [ 4 ]

2 голосов
/ 24 ноября 2009

Итак, у меня была похожая проблема, и вот что я нашел. Если вы установите:

horizontalScrollPolicy="off"

Тогда ширина столбцов будет автоматически изменяться в соответствии с шириной DataGrid. Вы также можете вручную установить ширину столбцов, если прокрутка включена или выключена и не установлена ​​на автоматический режим. Я нашел интересную статью об этом, http://junleashed.wordpress.com/2008/07/10/flex-datagridcolumn-width-management/. По сути, он управляет шириной столбцов вручную, а затем вычисляет, должна ли полоса прокрутки быть включена или выключена.

1 голос
/ 01 декабря 2009

Недавно я столкнулся с той же проблемой, и единственное решение, которое я нашел, - это использовать настраиваемую функцию, которая оптимизирует ширину столбцов DataGrid, как предложено здесь :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.controls.dataGridClasses.DataGridItemRenderer;

public function optimiseGridColumns(dg:DataGrid):void {
                        var dgCol:DataGridColumn;
                        var renderer:UITextField;
                        var tf:TextFormat;
                        var col:int;

                        if (dg.columnCount > 0 && dg.dataProvider != null) {
                        // initialize widths array
                               var widths:Array = new Array (dg.columnCount);
                                for (col = 0; col < widths.length; ++col) {
                                        widths[col] = -1;
                                }

                        // go through each data item in the grid, estimate
                        // the width of the text in pixels
                                for each (var item:Object in dg.dataProvider) {
                                        for (col = 0; col < widths.length; ++col) {
                                                renderer = new DataGridItemRenderer();
                                                // Must add to datagrid as child so that it inherits
                                                // properties essential for text width estimation,
                                                // such as font size
                                                dg.addChild(renderer);

                                                dgCol = dg.columns[col] as DataGridColumn;
                                                renderer.text = dgCol.itemToLabel(item);
                                                widths[col] = Math.max(renderer.measuredWidth + 10,widths[col]);

                                                // remove renderer from datagrid when we're done
                                                dg.removeChild(renderer);
                                        }
                                }

                                // go through headers in the grid, estimate the width of
                                // the text in pixels, assuming the text is bold
                                for (col = 0; col < widths.length; ++col) {
                                        // it's ok to reuse renderer, but I chose not
                                        // to for safety reasons. Optimize if needed.
                                        renderer = new DataGridItemRenderer();

                                        // Must add to datagrid as child so that it inherits
                                        // properties essential for text width estimation,
                                        // such as font size
                                        dg.addChild(renderer);

                                        dgCol = dg.columns[col] as DataGridColumn;
                                        renderer.text = dgCol.headerText;

                                        tf = renderer.getTextFormat();
                                        tf.bold = true;
                                        renderer.setTextFormat (tf);

                                        widths[col] = Math.max(renderer.measuredWidth + 25, widths[col]);

                                        // remove renderer from datagrid when we're done
                                        dg.removeChild(renderer);
                                }

                                // set width of columns to determined values
                                for (col = 0; col < widths.length; ++col)
                                {
                                        if (widths[col] != -1)
                                        {
                                                dg.columns[col].width = widths[col];
                                        }
                                }
                        }
                } 

]]>
</mx:Script>
    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>
        <mx:DataGrid id="dg1" width="100%" height="100%" rowCount="5" dataProvider="{employees}" creationComplete="optimiseGridColumns(dg1)">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
        </mx:DataGrid>

</mx:Application>
1 голос
/ 17 июня 2009

Это то, что я придумал, но это может быть неэффективно для крупных поставщиков данных:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onComplete();">

    <mx:Script>
        <![CDATA[
            // imports:
            import mx.events.FlexEvent;
            import mx.core.UIComponent;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.Text;
            import mx.utils.ObjectUtil;
            import mx.controls.Label;
            import mx.collections.ArrayCollection;
            // data provider:
            [Bindable] private var dp:ArrayCollection = new ArrayCollection();

            private function onComplete():void {
                // populate data provider here
                // to avoid calcMaxLengths execution when the app is created:
                dp = new ArrayCollection(
                    [
                        { col1: "Short", col2: "Other column 1" },
                        { col1: "Some long string", col2: "Other column 2" },
                        { col1: "Short", col2: "Other column 3" },
                        { col1: "Short", col2: "Other column 4" },
                        { col1: "The longest value in this column", col2: "Other column 5" },
                        { col1: "Short", col2: "Other column 6" },
                        { col1: "Short", col2: "Other column 7" }
                    ]
                );
            }

            // this is going to be executed whenever the data provider changes:
            [Bindable("dataChange")]
            private function calcMaxLengths(input:ArrayCollection):ArrayCollection {
                // if there are items in the DP:
                if ( input.length > 0 ) {
                    // and no SPECIAL child exists:
                    if ( getChildByName("$someTempUICToRemoveAfterFinished") == null ) {
                        // create new SPECIAL child
                        // this is required to call measureText
                        // if you use custom data grid item renderer
                        // then create instance of it instead of UIComponent:
                        var uic:UIComponent = new UIComponent();
                        // do not show and do not mess with the sizes:
                        uic.includeInLayout = false;
                        uic.visible = false;
                        // name it to leverage get getChildByName method:
                        uic.name = "$someTempUICToRemoveAfterFinished";
                        // add event listener:
                        uic.addEventListener(FlexEvent.CREATION_COMPLETE, onTempUICCreated);
                        // add to parent:
                        addChild(uic);
                    }
                }
                // return an input:
                return input;
            }

            // called when SPECIAL child is created:
            private function onTempUICCreated(event:FlexEvent):void {
                // keep the ref to the SPECIAL child:
                var renderer:UIComponent = UIComponent(event.target);
                // output - this will contain max size for each column:
                var maxLengths:Object = {};
                // temp variables:
                var key:String = "";
                var i:int=0;
                // for each item in the DP:
                for ( i=0; i<dp.length; i++ ) {
                    var o:Object = dp.getItemAt(i);
                    // for each key in the DP row:
                    for ( key in o ) {
                        // if the output doesn't have current key yet create it and set to 0:
                        if ( !maxLengths.hasOwnProperty(key) ) {
                            maxLengths[key] = 0;
                        }
                        // check if it's simple object (may cause unexpected issues for Boolean):
                        if ( ObjectUtil.isSimple(o[key]) ) {
                            // measure the text:
                            var cellMetrics:TextLineMetrics = renderer.measureText(o[key]+"");
                            // and if the width is greater than longest found up to now:
                            if ( cellMetrics.width > maxLengths[key] ) {
                                // set it as the longest one:
                                maxLengths[key] = cellMetrics.width;
                            }
                        }
                    }
                }

                // apply column sizes:
                for ( key in maxLengths ) {
                    for ( i=0; i<dg.columnCount; i++ ) {
                        // if the column actually exists:
                        if ( DataGridColumn(dg.columns[i]).dataField == key ) {
                            // set size + some constant margin
                            DataGridColumn(dg.columns[i]).width = Number(maxLengths[key]) + 12;
                        }
                    }
                }
                // cleanup:
                removeChild(getChildByName("$someTempUICToRemoveAfterFinished"));
            }

        ]]>
    </mx:Script>

    <mx:DataGrid id="dg" horizontalScrollPolicy="on" dataProvider="{calcMaxLengths(dp)}" width="400">
        <mx:columns>
            <mx:DataGridColumn dataField="col1" width="40" />
            <mx:DataGridColumn dataField="col2" width="100" />
        </mx:columns>
    </mx:DataGrid>

</mx:WindowedApplication>
0 голосов
/ 16 июня 2009

Для элемента управления Gridview вы можете перейти к свойству SelectedRowStyle и установить Wrap в True.

...