我试图在datagrid中添加一个textInput，以便用户可以看到有一个文本框供他们编辑。我有一个textInputRender，以便我可以在dataGrid中显示文本框并相应地更新该值。
我还有另一个dataGrid表来捕获我在之前的dataGrid表中选择的值。
问题是我能够在dataGrid表中看到文本框。但是我必须双击单元格并输入我的值以将dataGrid中单元格的值保存回数据提供者。实际上，用户不会双击进入，因为他们可能只是输入值。是否有如何在不双击单元格的情况下捕获值？
在我双击textBox并输入我的新值之后的下一个问题，它不反映文本框中的更改。但是我可以看到新输入的值被捕获。
请帮助我。我一直在苦苦思索这个问题。请问你能告诉我如何解决这个问题？
这是我将文本框放在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>
答案 0 :(得分：1)
试试这个：
在GridColumn“quant”中设置rendererIsEditable =“true”
<s:GridColumn dataField="quant" headerText="Qty" editable="true" rendererIsEditable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>
像这样更改你的ItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Binding source="ti.text" destination="data.quant"/>
<s:TextInput
id="ti"
text="{data.quant}"
editable="true"/>
</s:GridItemRenderer>
我的工作很好
答案 1 :(得分：0)
我无法识别你的代码存在哪个问题，无论如何我设法开发了一个：
datagrid中的textInput使用户可以看到有一个 文本框供他们编辑
使用此代码
<mx:DataGrid id="weekGrid" width="100%" height="60%"
dataProvider="{weekList}" editable="true">
<mx:DataGridColumn id="noteColumn" dataField="note" editable="false"
headerText="Note" sortable="false">
<mx:itemRenderer>
<fx:Component>
<mx:VBox width="100%" height="100%" horizontalAlign="center"
verticalAlign="middle">
<fx:Script>
<![CDATA[
import managers.StraordinariManager;
import spark.events.TextOperationEvent;
protected function textinput1_changeHandler(event:TextOperationEvent):void
{
data['note']=textInput.text;
outerDocument.notSavedAlert.statrtBlinker();
}
]]>
</fx:Script>
<s:TextInput id="textInput" width="100%" height="100%"
borderVisible="false"
change="textinput1_changeHandler(event)"
editable="{data.oreStr!=null}"
text="{data.oreStr!=null?data.note:''}">
</s:TextInput>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:DataGrid>
我使用ItemRenderer代替ItemEditor来避免双击问题。
请注意，列editable属性设置为false，但网格设置为editable="true"。
我也使用相同的tecnique来插入不同的组件，这是使用单选按钮的示例：
<mx:DataGridColumn id="flag" headerText="Approva Rifiuta" >
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" height="100%" horizontalAlign="center"
verticalAlign="middle">
<fx:Script>
<![CDATA[
import managers.IngressiManager;
import mx.events.FlexEvent;
protected function radiobutton1_changeHandler(event:Event):void
{
if(apprRb.selected){
data['flag']=ApprovazioneStraordinariView.APPROVA_FLAG;
data['note']="";
}else
if(rifRb.selected){
data['flag']=ApprovazioneStraordinariView.RIFIUTA_FLAG;
}
}
]]>
</fx:Script>
<s:RadioButton id="apprRb" label="A"
click="radiobutton1_changeHandler(event)"
groupName="approvaRifiutaGroup"
selected="{data['flag']==ApprovazioneStraordinariView.APPROVA_FLAG}">
</s:RadioButton>
<s:RadioButton id="rifRb" label="R"
click="radiobutton1_changeHandler(event)"
groupName="approvaRifiutaGroup"
selected="{data['flag']==ApprovazioneStraordinariView.RIFIUTA_FLAG}">
</s:RadioButton>
<fx:Declarations>
<s:RadioButtonGroup id="approvaRifiutaGroup">
</s:RadioButtonGroup>
</fx:Declarations>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>