是否可以使Flex List控件中的项目不可选?

时间:2010-01-12 21:26:29

标签: flex actionscript-3

是否可以使List控件中的项目无法选择?如果是这样,这将如何实现?

到目前为止,我尝试了一件事。我所做的是使用自定义项呈示器,在FlexEvent.DATA_CHANGE事件时检查data属性中的值。如果未设置该值,我尝试将项呈示器的可选属性设置为false。不幸的是,这似乎不起作用。

有什么想法吗?

5 个答案:

答案 0 :(得分:1)

所以我找到了自己的解决方案。它与你的相似,并且除了黑客攻击页面和向下翻页键之外,似乎还可以完成所有操作。我说hack,因为我不确定它是否像处理List控件一样处理caretIndex的增加或减少。基本上它只是在下一个可选项之前手动将caretIndex设置为索引,并将键代码更改为简单的向上或向下。

protected function disabledFilterFunction( data:Object ):Boolean
{
    return ( data != null && data.data == null );
}

override protected function mouseEventToItemRenderer( event:MouseEvent ):IListItemRenderer
{
    var item:IListItemRenderer = super.mouseEventToItemRenderer( event );

    if( item && item.data && disabledFilterFunction( item.data ) )
        return null;

    return item;
}

override protected function moveSelectionVertically( code:uint, shiftKey:Boolean, ctrlKey:Boolean ):void
{
    var i:int;
    var newIndex:int;

    switch( code )
    {
        case Keyboard.UP:
            newIndex = getPreviousUnselectableIndex( caretIndex - 1 );
            break;

        case Keyboard.DOWN:
            newIndex = getNextUnselectableIndex( caretIndex + 1 );
            break;

        case Keyboard.HOME:
            newIndex = getFirstSelectableIndex();
            code = Keyboard.UP;
            break;

        case Keyboard.END:
            newIndex = getLastSelectableIndex();
            code = Keyboard.DOWN;
            break;

        case Keyboard.PAGE_UP:
        {
            newIndex = Math.max( getFirstSelectableIndex(), getPreviousUnselectableIndex( caretIndex - ( rowCount - 2 ) ) );
            code = Keyboard.UP;
            break;
        }

        case Keyboard.PAGE_DOWN:
        {
            newIndex = Math.min( getLastSelectableIndex(), getNextUnselectableIndex( caretIndex + ( rowCount - 1 ) ) );
            code = Keyboard.DOWN;
            break;
        }
    }

    if( newIndex > -1 && newIndex < collection.length )
    {
        caretIndex = newIndex;
        super.moveSelectionVertically( code, shiftKey, ctrlKey );
    }
}

private function getFirstSelectableIndex():int
{
    var result:int = -1;

    for( var i:int = 0; i < collection.length; i++ )
    {
        if( !disabledFilterFunction( collection[i] ) )
        {
            result = i + 1;
            break;
        }
    }

    return result;
}

private function getLastSelectableIndex():int
{
    var result:int = -1;

    for( var i:int = collection.length - 1; i > -1; i-- )
    {
        if( !disabledFilterFunction( collection[i] ) )
        {
            result = i - 1;
            break;
        }
    }

    return result;
}

private function getPreviousUnselectableIndex( startIndex:int ):int
{
    var result:int = -1;

    for( var i:int = startIndex; i > -1; i-- )
    {
        if( !disabledFilterFunction( collection[i] ) )
        {
            result = i + 1;
            break;
        }
    }

    return result;
}

private function getNextUnselectableIndex( startIndex:int ):int
{
    var result:int = collection.length;

    for( var i:int = startIndex; i < collection.length; i++ )
    {
        if( !disabledFilterFunction( collection[i] ) )
        {
            result = i - 1;
            break;
        }
    }

    return result;
}

答案 1 :(得分:1)

我能够通过简单地在caretIndex ++和caretIndex--之前简单地执行此verticalScrollPosition ++和verticalScrollPosition来解决第一个/最后一个项目不可选的问题(在迈克尔链接到上面的示例中)。我无法相信修复是如此简单,但事实确实如此!

答案 2 :(得分:0)

我能够在ComboBox example之后添加分隔符组件。这是一个示例,其中渲染器逻辑被剥离,可选择性逻辑留在:

package com.example.ui  {
import flash.events.MouseEvent;
import flash.ui.Keyboard;

import mx.controls.List;
import mx.controls.listClasses.IListItemRenderer;

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


    /** Override mouse navigation */
    protected override function mouseEventToItemRenderer(event:MouseEvent):IListItemRenderer {
        var row:IListItemRenderer = super.mouseEventToItemRenderer(event);

        if (row != null && isSelectable(row.data)) {
            return null;
        }
        return row;
    }

    /** Override keyboard navigation */
    protected override function moveSelectionVertically(code:uint, shiftKey:Boolean, ctrlKey:Boolean):void {
        super.moveSelectionVertically(code, shiftKey, ctrlKey);

        if (code == Keyboard.DOWN && isSeparatorData(selectedItem)) {
            caretIndex++;
        }
        if (code == Keyboard.UP && isSeparatorData(selectedItem)) {
            caretIndex--;
        }
        finishKeySelection();           
    }

    /**
     * Define this mechanism in a way that makes sense for your project.
     */
    protected function isSelectable(data:Object):Boolean {
        return data != null && data.hasOwnProperty("type") && data.type == "separator";
    }

}
}

另一种(仍然不完美)可以更好地处理可滚动列表和连续分隔符:

    protected override function moveSelectionVertically(code:uint, shiftKey:Boolean, ctrlKey:Boolean):void {
        super.moveSelectionVertically(code, shiftKey, ctrlKey);

        var newCode:uint = singleLineCode(code);
        var item:Object = selectedItem;
        var itemChanged:Boolean = true;

        while (!isNaN(newCode) && itemChanged && isSeparatorData(item)) {
            super.moveSelectionVertically(newCode, shiftKey, ctrlKey);
            itemChanged = (item === selectedItem);
            item = selectedItem;
        }
    }

    private function singleLineCode(code:uint):uint {
        switch (code) {
        case Keyboard.UP:
        case Keyboard.PAGE_UP:
            return Keyboard.UP;
            break;
        case Keyboard.DOWN:
        case Keyboard.PAGE_DOWN:
            return Keyboard.DOWN;
            break;
        default:
            return NaN;
            break;                              
        }
        return code;
    }

答案 3 :(得分:0)

想到我会加上我的两个感觉。我想知道同样的事情(如何将列表设置为不可选),我意识到spark组件数据组就是这样做的。当然你需要使用flex 4,但如果你是,并且想知道我可以将我的列表设置为不可选择,我建议使用数据组。

答案 4 :(得分:0)

我一直在寻找解决方案,这就是我提出的解决方案。请注意,我正在使用火花列表。我希望有人觉得这很有帮助。

  1. 实施两个事件处理程序以进行更改和更改
  2. 将选择设置为-1并将requireSelection设置为false,以便不选择任何内容
  3. 构建数据提供者时,根据需要启用/禁用项目
  4. 在更改处理程序中提供一些逻辑,以便在未启用或不应选择的情况下对事件调用'preventDefault'。
  5. 示例:从我的实施中抄袭,我在其中构建自己的项目并使用平铺布局

    <s:List id="myListView"
        itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
        horizontalCenter="0"
        verticalCenter="0"
        borderVisible="false"
        dataProvider="{myItems}"
        change="changeHandler(event)" changing="changingHandler(event)"
        requireSelection="false"
        selectedIndex="-1" >
        <s:layout>
            <s:TileLayout verticalGap="0" />
        </s:layout>
    </s:List>
    <fx:script>
        <![CDATA[
            import mx.collections.ArrayCollection;            
            import spark.events.IndexChangeEvent;
    
            [Bindable]
            public var myItems = new ArrayCollection;
    
    
            protected function startup():void {
                // Here's where you'd build up your items if they
                // need to be built dynamically.
            }
    
            protected function changeHandler(event:IndexChangeEvent):void
            {
                var currentIndx:int = event.currentTarget.selectedIndex;
                var selectedItem:UIComponent = event.currentTarget.selectedItem as UIComponent;
    
                // Do whatever you need to do on selection here
            }
    
            protected function canMicrophoneChange(event:IndexChangeEvent):void
            {
                var currentIndx:int = event.currentTarget.selectedIndex;
                var selectedItem:UIComponent = event.currentTarget.selectedItem as UIComponent;
    
                // This will cancel the select if the item was not enabled.
                if (selectedItem.enabled == false) event.preventDefault();
            }
        ]]>
    </fx:script>