November 26th, 2007 by Kyle
Posted in: Flex
This is a follow on to my previous blog entry:
http://blog.739saintlouis.com/2007/11/22/flex-linebreaks-in-the-datagrid/
Here I show how to deal with line breaks in itemRenderer and itemEditors instead of in a datagrid labelFunction.
(This is also a nice example of writing simple, separate itemRenderer and itemEditors.)
Here is the application code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
<mx:Array id="arr2">
<mx:Object articleName="Finding out a characters \nUnicode character code \nDownloading the latest Adobe Labs version \nof Flex 3 SDK/Flex Builder 3 \n(codename: Moxie)" data="15" />
<mx:Object articleName="Setting an icon in an Alert control" data="14" />
<mx:Object articleName="Setting an icon in a Button control" data="13" />
<mx:Object articleName="Installing the latest nightly \nFlex 3 SDK build into Flex Builder 3" data="10" />
<mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
<mx:Object articleName="Using the Alert control\nFormatting data tips in a Slide\n" data="8" />
<mx:Object articleName="Finding out a characters \nUnicode character code \nDownloading the latest Adobe Labs version \nof Flex 3 SDK/Flex Builder 3 \n(codename: Moxie)" data="15" />
<mx:Object articleName="Setting an icon in an Alert control" data="14" />
<mx:Object articleName="Setting an icon in a Button control" data="13" />
<mx:Object articleName="Installing the latest nightly \nFlex 3 SDK build into Flex Builder 3" data="10" />
<mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
<mx:Object articleName="Using the Alert control\nFormatting data tips in a Slide\n" data="8" />
<mx:Object articleName="Finding out a characters \nUnicode character code \nDownloading the latest Adobe Labs version \nof Flex 3 SDK/Flex Builder 3 \n(codename: Moxie)" data="15" />
<mx:Object articleName="Setting an icon in an Alert control" data="14" />
<mx:Object articleName="Setting an icon in a Button control" data="13" />
<mx:Object articleName="Installing the latest nightly \nFlex 3 SDK build into Flex Builder 3" data="10" />
<mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
<mx:Object articleName="Using the Alert control\nFormatting data tips in a Slide\n" data="8" />
</mx:Array>
<mx:ArrayCollection id="arrColl2" source="{arr2}" />
<mx:DataGrid height="250" dataProvider="{arrColl2}" variableRowHeight="true" width="60%" editable="true">
<mx:columns>
<mx:DataGridColumn
headerText="Name of the article in question"
itemRenderer="MyRenderer" dataField="articleName"
itemEditor="MyEditor" editable="true"
editorUsesEnterKey="true" />
<mx:DataGridColumn dataField="data" headerText="ID of the article" editable="false"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Here is the itemRenderer based on Text:
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml" text="{txt}"
implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var _listData:DataGridListData;
[Bindable]
public var txt:String;
override public function set data(value:Object):void {
super.data = value;
var str:String = data[_listData.dataField];
var myPattern:RegExp = /\\n/g;
var newStr:String=str.replace(myPattern, "\n");
txt = newStr;
}
override public function get data():Object {
return super.data;
}
override public function get listData():BaseListData
{
return _listData;
}
override public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
}
]]>
</mx:Script>
</mx:Text>
Here is the itemEditor based on TextArea:
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml" text="{txt}"
implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var _listData:DataGridListData;
[Bindable]
public var txt:String;
override public function set data(value:Object):void {
super.data = value;
var str:String = data[_listData.dataField];
var myPattern:RegExp = /\\n/g;
var newStr:String=str.replace(myPattern, "\n");
txt = newStr;
}
override public function get data():Object {
return super.data;
}
override public function get listData():BaseListData
{
return _listData;
}
override public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
}
]]>
</mx:Script>
</mx:TextArea>
Browse the source of this example.
Download a zipfile containing the source to this sample.
Recent Comments