【发布时间】：2013-01-30 07:22:41
【问题描述】：
我正在尝试在数据网格中添加一个 textInput，以便用户可以看到有一个文本框供他们编辑。我有一个 textInputRender 以便我可以在 dataGrid 中显示文本框并相应地更新值。
我还有另一个 dataGrid 表来捕获我在之前的 dataGrid 表中选择的值。
问题是我能够在 dataGrid 表中看到文本框。但是我必须双击单元格并输入我的值才能将 dataGrid 中单元格的值保存回数据提供者。实际上，用户不会双击输入，因为他们可能只是输入值。是否有无需双击单元格即可捕获值的方法？？
我双击文本框并输入我的新值后的下一个问题它不反映文本框中的变化。但是我可以看到新输入的值被捕获。
请帮助我。我已经为此苦苦挣扎了很长时间。请问你能告诉我如何解决这个问题吗？
这是我将它放在 GridItemRenderer 标签中的文本框的自定义渲染器：
<s:TextInput id="ti" text="{data.quant}"/>
这是我的代码：
<fx:Script>
<![CDATA[
import FrontEndObjects.ColourItems;
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
private var order:ArrayCollection = new ArrayCollection();
private function addOrder():void{
var orderItems:ColourItems = new ColourItems("OrderNo","1","--Choose a colour--");
order.addItem(orderItems);
}
[Bindable]
private var confirmOrder:ArrayCollection = new ArrayCollection();
protected function saveData(event:MouseEvent):void
{
//dataGrid is the id (name) of our dataGrid table
var dataProvider = myDG.dataProvider;
var item = null;
for (var i:int = 0; i < dataProvider.length; i++)
{
item = dataProvider.getItemAt(i);
confirmOrder.addItem(item);
//Alert.show("the data is : " + item);
}
}
]]>
</fx:Script>
<s:BorderContainer x="240" y="50" width="449" height="518">
<s:DataGrid id="myDG" x="32" y="27" width="393" height="151" dataProvider="{order}"
editable="true" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="label1" headerText="Order #" editable="false"/>
<s:GridColumn dataField="quant" headerText="Qty" editable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>
<s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function onCbChange(event:IndexChangeEvent):void
{
var value:String = (event.currentTarget as DropDownList).selectedItem;
data[column.dataField] = value;
}
]]>
</fx:Script>
<s:DropDownList id="cb" width="100%" change="onCbChange(event)" prompt="--Choose a colour--"> <!--selectedIndex="0" requireSelection="true" >-->
<s:dataProvider>
<s:ArrayCollection>
<fx:String>red</fx:String>
<fx:String>blue</fx:String>
<fx:String>green</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns >
</s:DataGrid>
<s:DataGrid id="myDG1" x="24" y="317" width="401" height="174" dataProvider="{confirmOrder}"
requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="label1" headerText="Ordernum - getback"></s:GridColumn>
<s:GridColumn dataField="quant" headerText="quanty-getback"></s:GridColumn>
<s:GridColumn dataField="color" headerText="color-getback"></s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<s:Button x="355" y="186" label="add" click="addOrder()" />
<s:Button x="277" y="186" label="save" click="saveData(event)"/>
</s:BorderContainer>
【问题讨论】：
-
您能否提供更多代码来查看您的所有组件？我会尝试在我的电脑上启动它以找到解决方案。这取决于数据网格及其列的描述，这就是我需要它的原因。
-
双向绑定应该可以解决问题，我想。只需在绑定中添加一个@：
<s:TextInput id="ti" text="@{data.quant}"/>。并将editable设置为false，因为您在渲染器中有TextInput，而不是编辑器。 -
@Anton 嗨，我在上面的框中粘贴 myTextInputRender.mxml 时遇到了一些问题。由于某种原因，只有
出现。 -
ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe .com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true"> -
@Anton 那是我的 myTextInputRender.mxml 项目渲染器类。这就是我的全部代码。所以我在 MXML 应用程序中有 2 个 myTextInputRender.mxml（粘贴在 cmets 中）和上述代码。你可以在你的电脑上启动。提前致谢。 :)
标签： apache-flex datagrid