Question

我需要在flex中创建一个自动完成组件，使用Web服务从远程数据库中获取自动完成结果。我有web服务和查询部分。我已经通过扩展VBoxes在动作脚本中制作了自定义组件。但是我无法弄清楚如何生成应该在我的自动完成文本框中的文本输入下显示的弹出窗口。

目前我使用的是

PopUpManager.addPopUp(popup, parentComponent);

我的弹出类扩展了VBox，它扩展了createChildren方法，如下所示

protected override function createChildren():void
{
  for (var i:int = 0; i < results.length; i++) {
    var itemC:UIComponent =
        factory.getComponent(results[i]);
    addChild(itemC);
    itemC.addEventListener(MouseEvent.CLICK,
        getClickFunction(i));
}

private function getClickFunction(index:int):Function {
    return function (event:MouseEvent):void
        {
            selectedIndex = index;
        };
}

不幸的是，当webservice检索到它的结果并且调用了addPopUp时，什么都没有显示出来。

目前，factory.getComponent方法正在执行此代码

public function getComponent(user:Object):UIComponent
{
    var email:Label = new Label();
    email.text = user.email;
    var name:Label = new Label();
    name.text = user.displayName;
    var vbox:VBox = new VBox();
    vbox.addChild(name);
    vbox.addChild(email);
    return vbox;
}

Answer 1

我认为你应该找一个已经实现过这个的人。虽然你的问题可能与在调用addPopup（）之前没有定位和调整组件大小有关，即使我们帮你解决了这个问题，你还有很多工作要做。（BTW在你的覆盖中调用super.createChildren，否则会发生坏事）。无论如何，看看这个：

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047291

Answer 2

最后，我想出了如何使用List控件，我停止使用工厂生成组件，而是使用list控件中的itemRenderer功能。我还用它来替换自定义弹出类，我添加了一个稍后调用的定位函数。通过组合这些东西，我能够得到下拉按预期显示。似乎某些组件不能像弹出窗口那样正常工作。

无论如何，工作弹出代码是

在我的自动填充组件中扩展了HBox

dropDownList = new List();
dropDownList.itemRenderer = itemRenderer;
dropDownList.dataProvider = results;
dropDownList.labelFunction = labelFunction;
dropDownList.rowCount = results.length;
dropDownList.labelFunction = labelFunction==null ?
    defaultLabelFunction : labelFunction;
dropDownList.tabFocusEnabled = false;
dropDownList.owner = this;
PopUpManager.addPopUp(IFlexDisplayObject(dropDownList), DisplayObject(this));
callLater(positionDropDownList);

自动填充组件中的方法（textInput是我的文本字段）

public function positionDropDownList():void {
    var localPoint:Point = new Point(0, textInput.y);
    var globalPoint:Point = localToGlobal(localPoint);
    dropDownList.x = globalPoint.x;
    var fitsBelow:Boolean = parentApplication.height - globalPoint.y - textInput.height > dropDownList.height;
    var fitsAbove:Boolean = globalPoint.y > dropDownList.height;
    if (fitsBelow || !fitsAbove) {
        dropDownList.y = globalPoint.y + textInput.measuredHeight;
    } else {
        dropDownList.y = globalPoint.y - dropDownList.height;
    }
}

位置函数是我从http://hillelcoren.com/flex-autocomplete/

借来的代码

如何在Flex中制作自定义自动完成组件？

2 个答案: