在TextInput中编辑的值在滚动时折叠,在DataGrid中用作itemRenderer

时间:2011-03-25 08:17:02

标签: flex datagrid itemrenderer textinput

我有两个datagrids 1. OPTION GRID和2. ELECTION GRID。我在ELECTION GRID中使用VBox容器作为itemRenderer,它由描述列中的TextInput组成。以下是SWF示例。

每当在OPTION GRID中选中复选框时,我必须在第二个网格(ELECTION GRID)中为所有行添加带有描述值的相应文本输入。假设如果选中了两个复选框,我必须在第二个网格中添加两个textinput,依此类推...这样可以正常工作。但无论何时编辑textinput并向上或向下滚动,值都会在行之间折叠或消失。 我怀疑itemRenderers会在滚动时重复用于其他行。如何在textinput中保留编辑后的值?

以下是代码。

主要代码:

<mx:VBox width="100%" height="100%">
    <mx:Label text="OPTION GRID :" fontSize="12" fontStyle="normal" fontThickness="15"/>        
    <components:CAEventDetailDataGrid width="100%" height="20%" dataProvider="{optionData}" allowMultipleSelection="true" optionSelected="onOptionSelection(event)">        
        <components:columns>
            <mx:DataGridColumn dataField="selected" headerText="Select All" itemRenderer="renderer.CheckBoxItemRenderer" width="70" textAlign="center"/>
            <mx:DataGridColumn dataField="optionId" headerText="Option" textAlign="left"/>
            <mx:DataGridColumn dataField="option" headerText="Description" textAlign="left"/>
        </components:columns>       
    </components:CAEventDetailDataGrid>
    <mx:Label text="ELECTION GRID :" fontSize="12" fontStyle="normal" fontThickness="15"/>
    <mx:DataGrid id="electionGrid" width="100%" height="30%" dataProvider="{electionSummary}" rowCount="3" verticalScrollPolicy="on" variableRowHeight="true">                      
        <mx:columns>
            <mx:DataGridColumn dataField="dbProduct" headerText="DB Product"/>
            <mx:DataGridColumn dataField="entitledQty" headerText="Entitled Quantity"/>
            <mx:DataGridColumn dataField="entityId" headerText="Entity Id"/>
            <mx:DataGridColumn dataField="entityName" headerText="Entity Name"/>
            <mx:DataGridColumn dataField="eventStatus" headerText="Event Status"/>              
            <mx:DataGridColumn dataField="option" headerText="Description" itemRenderer="renderer.TextInputRenderer"/>            
        </mx:columns>                   
    </mx:DataGrid>
</mx:VBox>

<mx:Script>
    <![CDATA[
        import event.ElectionEvent;


        private function onOptionSelection(electionEvent : ElectionEvent) : void
        {       
            electionGrid.dispatchEvent(new ElectionEvent(ElectionEvent.OPTION_SELECTED,electionEvent.item));
        }

    ]]>
</mx:Script>

TextInputRenderer:

public class TextInputRenderer extends VBox

override public function set data(value:Object):void
    {
        _data = value;          
        _dataGrid = owner as DataGrid;
        if(_dataGrid)
            _dataGrid.addEventListener(ElectionEvent.OPTION_SELECTED,addTextInput);
    }

    private function addTextInput(electionEvent : ElectionEvent) : void
    {   
        var option : CAEventOption = electionEvent.item as CAEventOption;

        if(option != null)
        {   
            var textInput : TextInput = getChildByName(option.option) as TextInput;

            if(textInput == null)
            {
                textInput = new TextInput;
                textInput.name = option.option;                 
                textInput.text = option.option;                 
                textInput.percentWidth = 100;
                textInput.percentHeight = 100;
                textInput.visible = textInput.includeInLayout = option.selected;
                addChild(textInput);
            }
            else
            {
                textInput.visible = textInput.includeInLayout = option.selected;
            }
        }
    }

Election Event是一个自定义事件,只要在OPTION GRID中选中/取消选中复选框,就会触发并调用侦听器函数addTextInput。

private function addTextInput(electionEvent : ElectionEvent) : void

他们是否可以在TextInput中保留已编辑的值?任何人都可以有解决方案吗?

1 个答案:

答案 0 :(得分:1)

  

我怀疑itemRenderers会   被重用于其他行   滚动。如何保留编辑   textinput中的值

更正itemRenderer的整个目的是在您滚动基于列表的类时重复使用它。它不是渲染你班级中的所有数百个项目,而是渲染你正在展示的4-10(或其他);滚动浏览时重复使用这些DisplayObject。

您的代码看起来像是要向单个itemRenderer添加新的TextInput,但很难说。您忘记添加指向您应用的链接。

  

如何保留已编辑的值   textinput?

通常将值存储在对象的dataProvider中;不要根据一些外部事件来改变它。所以,在你的“onItemSelect”方法中,你会在第二个DataGrid的数据中添加一个项目,然后创建一个newRenderer,它应该能够通过该渲染器的data属性“自己创建”。