Flex 组合框中为空

Question

如何制作一个用户可以选择 null 的组合框？

如果您只是在数据提供程序中创建一个带有 null 的组合框，则会显示该值，但用户无法选择它：

<mx:ComboBox id="cb" dataProvider="{[null, 'foo', 'bar']}" />

有没有办法使该 null 可选择？

解决方法是向 dataProvider 添加一个不为 null 但“代表”null 的项目； 然后每次访问组合框时在 null 和该对象之间进行映射。 但这并不是一个真正优雅的解决方案。 您始终必须在访问“可为空”组合框的所有代码中牢记此映射...

编辑：扩展为什么我不喜欢解决方法： 当然，这可以在子类中完成，但是要么我引入新属性（例如 nullableSelectedItem）； 但您必须始终小心使用这些属性。 或者我重写 ComboBoxes selectedItem; 但我担心这会破坏基类：它可能不喜欢某些东西改变其对当前所选项目的想法。 即使这个脆弱的黑客工作，在 selectedItem 和 dataProvider 之上，这个 nullItem 也需要在 data 和 listData 中进行特殊处理 对于渲染器，在 labelFunction 中，然后它可能仍然在 ComboBox 发送的事件中公开...... 它可能会起作用，但只是为了解决以下问题：如果用户单击该项目，它不会被激活（对于其余的，ComboBox 可以很好地处理 null ），这是一个相当大的黑客。 （另一种选择是将 ui 组件委托给 ComboBox，但这需要更多代码才能避免这个小问题）

Answer 1

requireSelection="false" 将允许空白值，并且提示允许您输入用于该空白值的文本（如果您愿意）。

Answer 2

似乎正确管理空项目的唯一方法是将项目实际添加到组合框的数据提供程序中。 以下子类将自动处理此问题。

为了支持数据提供者的更改，在项目添加/删除以及数据提供者本身的完全重新分配方面，实现有点棘手（只需考虑 arraycollections 绑定到远程服务的响应）。

<代码>
package {

    import flash.events.Event;
    import flash.events.FocusEvent;
    import mx.collections.ArrayCollection;
    import mx.collections.ICollectionView;
    import mx.collections.IList;
    import mx.containers.FormItem;
    import mx.controls.ComboBox;
    import mx.events.CollectionEvent;
    import mx.events.ListEvent;
    import mx.validators.Validator;

    public class EmptyItemComboBox extends ComboBox {

        protected var _emptyItem:Object = null;
        protected var _originalDataProvider:ICollectionView = null;

        public function EmptyItemComboBox() {
            super();
            addEmptyItem();
            addEventListener(Event.CHANGE, onChange);
        }

        private function onChange(event:Event):void {
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        [Bindable]
        public function get emptyItem():Object {
            return _emptyItem;
        }

        public function set emptyItem(value:Object):void {
            if (_emptyItem != value) {
                clearEmptyItem();
                _emptyItem = value;
                addEmptyItem();
            }
        }

        [Bindable(event="isEmptySelectedChanged")]
        public function get isEmptySelected():Boolean {
                return (selectedItem == null || (_emptyItem != null && selectedItem == _emptyItem));
        }

        override public function set selectedItem(value:Object):void {
            if (value == null && emptyItem != null) {
                super.selectedItem = emptyItem;
            } else    if (value != selectedItem) {
                super.selectedItem = value;
            }
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        override public function set dataProvider(value:Object):void {
            if (_originalDataProvider != null) {
                _originalDataProvider.removeEventListener(
                        CollectionEvent.COLLECTION_CHANGE,
                        onOriginalCollectionChange);
            }
            super.dataProvider = value;
            _originalDataProvider = (dataProvider as ICollectionView);
            _originalDataProvider.addEventListener(
                    CollectionEvent.COLLECTION_CHANGE,
                    onOriginalCollectionChange)
            addEmptyItem();
        }

        private function clearEmptyItem():void {
            if (emptyItem != null && dataProvider != null 
                    && dataProvider is IList) {
                var dp:IList = dataProvider as IList;
                var idx:int = dp.getItemIndex(_emptyItem);
                if (idx >=0) {
                    dp.removeItemAt(idx);    
                }
            }
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        private function addEmptyItem():void {
            if (emptyItem != null) {
                 if (dataProvider != null && dataProvider is IList) {
                    var dp:IList = dataProvider as IList;
                    var idx:int = dp.getItemIndex(_emptyItem);
                    if (idx == -1) {
                        var newDp:ArrayCollection = new ArrayCollection(dp.toArray().concat());
                        newDp.addItemAt(_emptyItem, 0);
                        super.dataProvider = newDp;
                    }
                }
            }
            dispatchEvent(new Event("isEmptySelectedChanged"));
        }

        private function onOriginalCollectionChange(event:CollectionEvent):void {
            if (_emptyItem != null) {
                dataProvider = _originalDataProvider;
                addEmptyItem();
            }
        }
    }
}

关于该类的一些注释：

• 它将自动在列表中插入空对象。这对我的场景来说是一个强烈的要求：数据提供程序由远程服务返回而且它们不能仅包含其他元素来支持 Flex UI，我也无法手动监视每个集合以在每次集合刷新时创建空项目。

• 由于它必须处理集合的内容，因此它将在内部创建具有相同项目实例和空实例的原始集合的副本，因此根本不会触及原始集合的实例，并且可以在其他上下文中重用。

• 它将侦听原始数据提供程序上的更改，允许对其进行处理，甚至分配一个全新的数据提供程序：将自动重新创建空项目。

• 您可以通过emptyItem属性控制提供用作“空项目”的实际实例：这允许与集合的其余部分保持一致的数据类型（如果您使用类型化对象），或者定义一个自定义标签。

使用它的一些示例代码...

    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
    ]]>
    </mx:Script>

    <mx:ArrayCollection id="myDP">
    <mx:source>
        <mx:Array>
            <mx:Object value="1" label="First"/>  
            <mx:Object value="2" label="Second"/>
            <mx:Object value="3" label="Third"/>
        </mx:Array>
    </mx:source>
    </mx:ArrayCollection>

    <local:EmptyItemComboBox id="comboBox" dataProvider="{myDP}" labelField="label">
    <local:emptyItem>
        <mx:Object value="{null}" label="(select an item)"/>  
    </local:emptyItem>
    </local:EmptyItemComboBox>

    <mx:Button label="Show selected item" click="Alert.show(comboBox.selectedItem.value)"/>

    <mx:Button label="Clear DP" click="myDP.removeAll()"/>
    <mx:Button label="Add item to DP" click="myDP.addItem({value: '4', label: 'Fourth'})"/>
    <mx:Button label="Reset DP" click="myDP = new ArrayCollection([{value: '1', label: 'First'}])"/>

    <mx:Label text="{'comboBox.isEmptySelected = ' + comboBox.isEmptySelected}"/>

</mx:Application>

> <代码>

Answer 3

一个非常简单但也非常有限的解决方案是添加一个prompt=""属性。

这将阻止ComboBox自动选择dataProvider中的第一个项目，但一旦用户选择一个项目，空行将不会不再显示。

Answer 4

以下解决方案可能是最简单的解决方案：

<mx:ComboBox id="cb" dataProvider="{[{label:"", data:null}, {label:'foo', data:'foo'}, {label:'bar', data:'bar'}]}" />

并使用 cb.selectedItem.data 访问数据。

但是，正如 Wouter 提到的，这个简单的解决方案并不适合绑定。

因此，这里有一个更棘手的解决方案，它将允许选择 null 对象：

<mx:ComboBox id="cb" dataProvider="{[null, 'foo', 'bar']}" dropdownFactory="{new ClassFactory(NullList)}" />

其中 NullList 是以下类：

package test
{
import mx.controls.List;

public class NullList extends List
{
    public function NullList()
    {
        super();
    }

    override public function isItemSelectable(data:Object):Boolean
    {
        if (!selectable)
            return false;
        return true;
    }

}
}

Answer 5

不幸的是，这是不可能的。
然而，一个不会让您“必须牢记此映射”的好解决方案是创建一个继承自 ComboBox 的类，并具有自己的 DataProvider 属性。

此属性设置器将处理空值并在超级 ComboBox 类上有一个表示形式。