posts - 325,  comments - 25,  trackbacks - 0
 

15.项呈现器创建方法:

    1)内投方法:通过在列表控件的itemRenderer属性中定义单个组件,能够将插入的单个组件作为项呈现器

    2)内联方法:使用列表控件的子标签来定义一个或多个组件,这些组件将作为项呈现器

    3)可重用组件:将自定义组件作为项呈现器

内投方法示例:

    

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>

 <![CDATA[

  

   [Bindable]

   privatevar myDP:Array = [

    {label: "Customer 1", selected: true},

    {label: "Customer 2", selected: false}

   ];

  

 ]]>

 </mx:Script>

 

 <mx:DataGrid dataProvider="{myDP}">

 <mx:columns>

   <mx:DataGridColumn dataField="label" headerText="Label" />

   <mx:DataGridColumn dataField="selected" itemRenderer="mx.controls.CheckBox" />

 </mx:columns>

 </mx:DataGrid>

 

</mx:Application>

内联方法示例:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>

 <![CDATA[

  

   [Bindable]

   privatevar myDP:Array = [

    {label: "Customer 1", selected: true},

    {label: "Customer 2", selected: false}

   ];

  

 ]]>

 </mx:Script>

 

 <mx:DataGrid dataProvider="{myDP}">

 <mx:columns>

   <mx:DataGridColumn dataField="label" headerText="Label" />

   <mx:DataGridColumn dataField="selected">

    <mx:itemRenderer>

     <mx:Component>

      <mx:VBox verticalAlign="middle" horizontalAlign="center">

       <mx:CheckBox/>

      </mx:VBox>

     </mx:Component>

    </mx:itemRenderer>

   </mx:DataGridColumn>

 </mx:columns>

 </mx:DataGrid>

</mx:Application>

将组件作为呈现器示例:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>

 <![CDATA[

  

   [Bindable]

   privatevar myDP:Array = [

    {label: "Oranges", date: new Date()},

    {label: "Apples", date: new Date()},

    {label: "Pears", date: new Date()}

   ];

  

 ]]>

 </mx:Script>

 

 <mx:List dataProvider="{myDP}" itemRenderer="MyCustomItemRenderer" />

 

</mx:Application>

MyCustomItemRenderer.xml

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">

 

 <mx:Script>

 <![CDATA[

   import mx.controls.Alert;

 ]]>

 </mx:Script>

 

 <mx:HBox>

 <mx:TextInput text="{data.label}" />

 <mx:DateField id="dateField" selectedDate="{data.date}" />

 <mx:Button label="Button" click="Alert.show('Selected item - Fruit: ' + data.label + '"n' + 'Date: ' + dateField.selectedDate)" />

 </mx:HBox>

</mx:HBox>
16.项编辑器
编辑过程:
a) 用户利用鼠标按钮或者tab键激活单元格
b) 分派itemEditBeginning 事件,使用该事件能够禁用某特定单元格或者多个单元格的编辑功能
c) 分派itemEditBegin事件以便打开项编辑器,该事件可用于修改传递给项编辑器数据
d)用户编辑单元格数据
e)用户移除焦点时,结束编辑会话
f)分派itemEditEnd 事件以便关闭项编辑器,同时使用新数据更新单元格

当列表控件(List Tree DataGrid)的editable属性设置为true时,用户就能够编辑控件内容

自定义编辑事件监听器访问单元格数据:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>
  <![CDATA[
   import mx.controls.TextInput;
   import mx.events.DataGridEvent;
   import mx.collections.ArrayCollection;
   
   [Bindable]
   private var productsAC:ArrayCollection = new ArrayCollection
   (
    [
     {Product: "iPod", Price: 249},
     {Product: "iMac", Price: 1299},
     {Product: "MacBook Pro", Price: 1999}
    ]
   );
   
   private function getCellInfo(event:DataGridEvent):void
   {
    var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
    var newVal:String = myEditor.text;
    var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField];
    cellInfo.text = "cell edited. \n";
    cellInfo.text += "Row, column: " + event.rowIndex + ", " + event.columnIndex + "\n";
    cellInfo.text += "New value: " + newVal + "\n";
    cellInfo.text += "Old value: " + oldVal;
   }
   
  ]]>
 </mx:Script>
 
 <mx:TextArea id="cellInfo" width="300" height="150" />
 
 <mx:DataGrid dataProvider="{productsAC}" editable="true" itemEditEnd="getCellInfo(event)">
  <mx:columns>
   <mx:DataGridColumn dataField="Product" />
   <mx:DataGridColumn dataField="Price" />
  </mx:columns>
 </mx:DataGrid>
 
</mx:Application>
禁用单元格编辑器:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>
  <![CDATA[
   import mx.controls.TextInput;
   import mx.events.DataGridEvent;
   import mx.collections.ArrayCollection;
   
   [Bindable]
   private var productsAC:ArrayCollection = new ArrayCollection
   (
    [
     {Product: "iPod", Price: 249},
     {Product: "iMac", Price: 1299},
     {Product: "MacBook Pro", Price: 1999}
    ]
   );
   
   private function onEditBeginning(event:DataGridEvent):void
   {
    if (event.rowIndex == 2)
     event.preventDefault();
   }
   
  ]]>
 </mx:Script>
 
 <mx:DataGrid dataProvider="{productsAC}" editable="true" itemEditBeginning="onEditBeginning(event)">
  <mx:columns>
   <mx:DataGridColumn dataField="Product" />
   <mx:DataGridColumn dataField="Price" />
  </mx:columns>
 </mx:DataGrid>
 
</mx:Application>



posted on 2011-03-14 09:50 长春语林科技 阅读(358) 评论(0)  编辑  收藏 所属分类: flex

只有注册用户登录后才能发表评论。


网站导航:
 
<2011年3月>
272812345
6789101112
13141516171819
20212223242526
272829303112
3456789

 

长春语林科技欢迎您!

常用链接

留言簿(6)

随笔分类

随笔档案

文章分类

文章档案

相册

收藏夹

搜索

  •  

最新评论

阅读排行榜

评论排行榜