我正在尝试在数据网格中添加一个 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>