how to have a link in a datagrid and to pop up a window on clicking the link in flex?
I have a datagrid with different types of columns, like I have checkboxes, combo boxes and text Inputs as the column types.
Now I want one of the column type to a link, with the label "view". All the rows in that column are link with the same label "View" and on clicking it, I want a Pop up window to be opened?
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
<![CDATA[
[Bindable]
private var defectDetails:ArrayCollection = new ArrayCollection([ ]);
private function addDefect():void{
defectDG.dataProvider.addItem(
{CommentHistory:"View"}
);
defectDG.height += 30;
}
private function defectCommentsPopUp():void{
var helpWindow:defectCommentsLookUp=defectCommentsLookUp(PopUpManager.createPopUp(this, defectCommentsLookUp, true));
}
]]>
</mx:Script>
<mx:DataGrid id="defectDG" dataProvider="{defectDetails}" variableRowHeight="true" width="100%" height="75" >
<mx:columns>
<mx:DataGridColumn headerText="Select" dataField="Select" itemRenderer="mx.controls.CheckBox" width="50" textAlign="center" />
<mx:DataGridColumn headerText="Defect Id" dataField="DefectId" itemRenderer="mx.controls.TextInput" textAlign="center"/>
<mx:DataGridColumn headerText="Status" dataField="St开发者_如何学Pythonatus" itemRenderer="mx.controls.ComboBox" textAlign="center"/>
<mx:DataGridColumn headerText="Severity" dataField="Severity" itemRenderer="mx.controls.ComboBox" textAlign="center" />
<mx:DataGridColumn headerText="Comment History" dataField="CommentHistory" itemRenderer="mx.controls.Text" textAlign="center" headerWordWrap="true" />
</mx:columns>
</mx:DataGrid>
<mx:Button styleName="buttonStyle" label="Add New Defect" click="addDefect()"/>
</mx:VBox>
I didn't know how to bring a link in the datagrid. So used the Text control to display the "View" label. Now If I click this item, "View" in the datagrid, I want the Pop up function, i.e.,defectCommentsPopUp() to be called.
How to do this?
Assign values to commentHistory
that would help to identify the row.
<mx:DataGridColumn dataField="commentHistory">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="View" click="outerDocument.onViewClick(data)"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
in the script:
private function onViewClick(item:Object):void
{
//item contains the commentHistory value of the clicked row.
showPopUp(item);
}
精彩评论