在DataGrid列中使用TruncateToFit的问题

时间:2011-02-05 00:06:27

标签: flex actionscript-3

我在flex中使用dataGrid时遇到此问题。我在datagrid的一列中有一个Label,标签的truncateToFit属性为True。 但它没有用。

起初我对Label有一个静态宽度,它适用于那种情况。但是使用它的问题是,当我改变列的宽度时,在输出中,它不会改变标签的宽度,如果我使列宽变小,标签就不会被截断。

使用100%宽度作为标签,也没有帮助。

我的数据网格代码如下所示代码:

<mx:AdvancedDataGrid id="user_files_list" width="100%" height="100%" 
                    top="0" left="0" dragEnabled="true" dragMoveEnabled="true"
                    dataProvider="{fm_model.user_files_list}" 
                    allowMultipleSelection="true" borderStyle="solid" rowHeight="45">
                    <mx:columns>            
                    <mx:DataGridColumn id="col2" sortable="true" headerText="Type" width="120"
                            headerStyleName="datagridHeader" dataField="content_type">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:Canvas width="100%" height="100%" verticalScrollPolicy="off"  borderThickness="2" borderStyle="solid" horizontalScrollPolicy="off">
                                            <mx:Label width="100%" text="{'tag' == data.content_type?'File Folder':
                                            outerDocument.getText(data.name)}" truncateToFit="true" styleName="labelStyle"
                                            verticalCenter="0" />   
                                    </mx:Canvas>                                        
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>

此致 Zeeshan

4 个答案:

答案 0 :(得分:1)

好吧..好吧我不确定为什么这不起作用... Adob​​e的文档说“这个属性可以用作数据绑定的源”但直接绑定到col2.width不起作用{{3 }}

....但是,您应该能够绑定到列宽。 Bindings似乎没有得到正确的更新,所以...而是我使用输入框架处理程序来更新标签宽度绑定的公共变量。虽然这是一种解决方法,但它确保更新宽度。

让我知道这有助于......干杯

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                enterFrame="application1_enterFrameHandler(event)">
    <mx:Script>
        <![CDATA[

            [Bindable]
            public var colWidth:Number;

            protected function application1_enterFrameHandler(event:Event):void
            {
                colWidth = col2.width;
            }

        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id="user_files_list" width="100%" height="100%" 
                         top="0" left="0" dragEnabled="true" dragMoveEnabled="true"
                         dataProvider="{[{content_type:'sad asde asd asd asdasd.l;k;asd ;lsd asd;alsd;asd asdasd asdkasd' +
                             'asdad asdasd asdasd asdasdasdasdasd asdasd asda sdasda sdasd aa sdasd asdasdasd asd asdasd' +
                             'asdd asdasd asda sda sda sdasdasda d asd a sd a sd a sd a sdasdasd a sdasdasd asdasdasd as' +
                             'jkhkhkjhkjh Gold Diamond, Gold Chain!'},{content_type:'Hello\''}, {content_type:'World'}]}" 
                         allowMultipleSelection="true" borderStyle="solid" rowHeight="45">
        <mx:columns>            

            <mx:AdvancedDataGridColumn id="col2" sortable="true" headerText="Type" width="120"
                               headerStyleName="datagridHeader" dataField="content_type">
                <mx:itemRenderer>

                    <mx:Component>
                        <mx:Canvas width="100%" height="100%" verticalScrollPolicy="off"  borderThickness="2" borderStyle="solid" horizontalScrollPolicy="off">
                            <mx:Label width="{mx.core.Application.application.colWidth}"
                                    text="{data.content_type}" truncateToFit="true" styleName="labelStyle"
                                      verticalCenter="0" />   
                        </mx:Canvas>                                        

                    </mx:Component>

                </mx:itemRenderer>

            </mx:AdvancedDataGridColumn>
            <mx:AdvancedDataGridColumn width="200"/>
        </mx:columns>

    </mx:AdvancedDataGrid>
</mx:Application>

答案 1 :(得分:1)

指定宽度的优雅方式是

theText.width = AdvancedDataGrid(handle.owner).columns[handle.columnIndex].width;

,其中

var handle:AdvancedDataGridListData = AdvancedDataGridListData(listData);

因此可以重复使用项呈示器,而不是使用硬编码绑定到特定列。

答案 2 :(得分:1)

我可以通过在标签上设置minWidth="1"并设置width="100%"来实现目标。

minWidth被设置为标签的全长,并且正在停止父级正确调整大小。

注意:我还必须设置textAlign="left"以保留我的风格,这可能不适用于您的情况。

答案 3 :(得分:0)

您可以保留静态宽度,并在variableRowHeight=true标记中设置属性wordWrap=trueAdvancedDataGrid。希望这有效!