Flex:自定义项目渲染器对于Combobox控件截断文本

时间:2008-09-19 17:36:14

标签: flex actionscript mxml

我已经实现了一个自定义项呈示器,我正在使用我正在处理的flex项目上的组合框。它显示每个项目的图标和一些文本。唯一的问题是,当文本很长时,菜单的宽度没有正确调整,文本在显示时被截断。我已经尝试调整所有明显的属性来缓解这个问题,但没有取得任何成功。有没有人知道如何使组合框菜单宽度适当地缩放到它呈现的任何数据?

我的自定义项呈示器实现是:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    styleName="plain" horizontalScrollPolicy="off"> 

    <mx:Image source="{data.icon}" />
    <mx:Label text="{data.label}" fontSize="11" fontWeight="bold" truncateToFit="false"/>

</mx:HBox>

我的组合框就像这样使用它:

    <mx:ComboBox id="quicklinksMenu" change="quicklinkHandler(quicklinksMenu.selectedItem.data);" click="event.stopImmediatePropagation();" itemRenderer="renderers.QuickLinkItemRenderer" width="100%"/>

编辑: 我应该澄清一下:我可以将组合框上的dropdownWidth属性设置为一些任意大的值 - 这将使一切都适合,但它会太宽。由于此组合框中显示的数据是通用的,我希望它自动将自身大小调整为数据提供者中的最大元素(flex文档说它会执行此操作,但我感觉我的自定义项呈示器在某种程度上打破了这种行为)

5 个答案:

答案 0 :(得分:1)

只是一个随意的想法(不知道这是否有帮助):

尝试将父HBox和Label的宽度设置为100%。这通常可以解决我遇到的任何类似的问题。

答案 1 :(得分:0)

您是否尝试过使用 calculatePreferredSizeFromData()方法?

protected override function calculatePreferredSizeFromData(count:int):Object

答案 2 :(得分:0)

这个答案可能为时已晚,但我对DataGrid的列宽有一个非常类似的问题。

经过多次涂鸦后,我决定在私有TextField中预渲染文本,从中获取渲染文本的宽度,并在所有适当的调整大小类型事件上显式设置列的宽度。有点hack-y但是如果你没有很多变化的数据就可以运行得很好。

答案 3 :(得分:0)

你需要做两件事:

  • 对于文本,使用mx.controls.Text(支持文本换行)而不是mx.controls.Label
  • set comboBox的dropdownFactory.variableRowHeight=true - 此dropdownFactory通常是List的子类,您在ComboBox上设置的itemRenderer将用于呈现列表中的每个项目

并且,不要明确设置comboBox.dropdownWidth - 让默认值comboBox.widt h用作下拉宽度。

答案 4 :(得分:0)

如果查看measure的{​​{1}}方法,您会看到comboBox将其mx.controls.ComboBase计算为文本宽度和宽度的总和。 comboBox按钮。

measuredMinWidth

@defmeta提到的 // Text fields have 4 pixels of white space added to each side // by the player, so fudge this amount. // If we don't have any data, measure a single space char for defaults if (collection && collection.length > 0) { var prefSize:Object = calculatePreferredSizeFromData(collection.length); var bm:EdgeMetrics = borderMetrics; var textWidth:Number = prefSize.width + bm.left + bm.right + 8; var textHeight:Number = prefSize.height + bm.top + bm.bottom + UITextField.TEXT_HEIGHT_PADDING; measuredMinWidth = measuredWidth = textWidth + buttonWidth; measuredMinHeight = measuredHeight = Math.max(textHeight, buttonHeight); } 方法(在calculatePreferredSizeFromData中实现)假定数据渲染器只是一个文本字段,并使用mx.controls.ComboBox从标签字段计算文本宽度flash.text.lineMetrics对象。如果要在项目渲染器中添加其他可视元素,并在计算自己的大小时考虑data的大小,则必须扩展ComboBox类并覆盖{{1像这样的方法:

mx.controls.ComboBox

如果可能,请将图片尺寸存储在数据对象中,并将这些值用作calculatePreferredSizeFromData override protected function calculatePreferredSizeFromData(count:int):Object { var prefSize:Object = super.calculatePrefferedSizeFromData(count); var maxW:Number = 0; var maxH:Number = 0; var bookmark:CursorBookmark = iterator ? iterator.bookmark : null; var more:Boolean = iterator != null; for ( var i:int = 0 ; i < count ; i++) { var data:Object; if (more) data = iterator ? iterator.current : null; else data = null; if(data) { var imgH:Number; var imgW:Number; //calculate the image height and width using the data object here maxH = Math.max(maxH, prefSize.height + imgH); maxW = Math.max(maxW, prefSize.width + imgW); } if(iterator) iterator.moveNext(); } if(iterator) iterator.seek(bookmark, 0); return {width: maxW, height: maxH}; } ,这样可以更轻松地调整尺寸。

编辑:

如果要在图像(如标签)之外向渲染添加元素,则在迭代数据元素时也需要计算其大小,并在计算imgH时考虑这些维度imgW