FlexでItemEditorのコンポーネントをカスタマイズする方法

2年 ago
桜, 春樹
1 minute

Flex では独自 ItemEditor コンポーネントをカスタマイズすることで独自のエディタを実装できます。以下に簡単なサンプルを示します。

  1. まず、カスタムの ItemEditor コンポーネントを作成します。Flex 付属の ItemEditor クラスを継承するか、IItemEditor インターフェースを実装できます。以下に ItemEditor を継承したサンプルコードを示します。
package
{
import mx.controls.TextInput;
import mx.controls.listClasses.IListItemRenderer;
import mx.events.FlexEvent;
public class CustomItemEditor extends TextInput implements IListItemRenderer
{
public function CustomItemEditor()
{
super();
// 添加事件监听器，当编辑器初始化完成时触发
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
}
private function onCreationComplete(event:FlexEvent):void
{
// 在这里可以对编辑器进行一些初始化设置
}
// 实现 IListItemRenderer 接口的 get/set 方法
// 这些方法将会在编辑器的生命周期中被调用
public function get data():Object
{
return text;
}
public function set data(value:Object):void
{
text = value ? value.toString() : "";
}
public function get selected():Boolean
{
return false;
}
public function set selected(value:Boolean):void
{
// 编辑器不需要处理选中状态
}
public function get dragged():Boolean
{
return false;
}
public function set dragged(value:Boolean):void
{
// 编辑器不需要处理拖动状态
}
}
}
  1. ItemEditor を使う場所で、カスタム ItemEditor コンポーネントを利用するように指定します。以下は、カスタム ItemEditor コンポーネントを利用したコード例です。
<mx:List dataProvider="{dataProvider}" editable="true">
<mx:itemEditor>
<fx:Component>
<local:CustomItemEditor/>
</fx:Component>
</mx:itemEditor>
</mx:List>

dataProviderはリストのデータソースで、editableは編集を許可するかどうかを表すフラグで、trueを指定すると編集可能です。fx:Componentタグ内には、カスタムのItemEditorコンポーネントを配置します。

Flex で ItemEditor コンポーネントをカスタマイズする 1 つの方法をご紹介しました。より複雑な編集機能を実現するために、必要に応じて CustomItemEditor クラスを拡張および変更できます。

bannerAds