同一个Column,不同ItemEditor

      flex专区 2009-3-13 16:4

这类需求比较少见,不过还是被我碰上了,哈哈。AdvancedDataGrid中的某个Column,可能有些行有itemEditor,而有些没有,由data内的一些值来决定。我翻了一下帮助,常规来说似乎是做不到的。好在ItemEditor可以被重新定义,“小动作”的机会大大增加。

我的想法是:首先column还是要设定可以editable,但是对某些行来说,可以透过自定义的ItemEditor来返回一个空白的Canvas,从用户角度来讲,他们只会看到一个不可编辑的单元格。下面的工作就是如何来定义一个ItemEditor的问题了。我在google上找到一个绝佳的例子:http://www.actionscript.org/forums/showthread.php3?p=817711。就是欠分析,o(∩_∩)o…。

按照flex framework的设计,每个ItemEditor都要继承mx.controls.listClasses.IListItemRenderer接口,你可以去翻翻帮助,很多组件都会继承这个接口,包括Container(这就是为什么很多组件可以被嵌在mx:component里的道理)。我就挑Canvas来写我自己的ItemEditor了。噢,还需要注意的一点是,需要继承mx.core.IDataRenderer,它定义了data property,好在Canvas也帮我们继承了。

下面是我写的ItemEditor:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" verticalScrollPolicy="off" horizontalScrollPolicy="off"
 implements="mx.core.IDataRenderer, mx.controls.listClasses.IListItemRenderer">
 
 <mx:Script>
  <![CDATA[
   import myvocal.*;
   import mx.controls.TextInput;
 
   private var dataChanged = false;
   private var folderIntroInput:TextInput;
 
   public override function set data(value:Object):void
   {
    super.data = value;
    dataChanged = true;
    validateProperties();
   }
 
 
   protected override function commitProperties():void
   {
    super.commitProperties();
 
    if(dataChanged)
    {
     removeEditor();
     createEditor();
     dataChanged = false;
    }
   }
 
 
   private function createEditor():void
   {
    var vo:CFolder = data as CFolder
    if(vo)
    {
     folderIntroInput = new TextInput();
     folderIntroInput.width = width;
     folderIntroInput.height = height;
     addChild(folderIntroInput);
     folderIntroInput.text = vo.nIntro;
 
     //give focus
     folderIntroInput.setFocus();
    }
   }
 
   private function removeEditor():void
   {
    if(folderIntroInput)
    {
     removeChild(folderIntroInput);
     folderIntroInput = null
    }
   }
 
 
   /**
    * AdvancedDataGrid will fetch new value from this interface to update dataprovider
    */
   public function get newData():Object
   {
    var nd:String = "";
    if(folderIntroInput)
    {
     nd = folderIntroInput.text;
    }
    trace(nd)
    return nd;
   }
 
  ]]>
 </mx:Script>
 
</mx:Canvas>

最后再来些甜点吧:

commitProperties方法只要是property被赋值就会触发,所以放了个dataChanged布尔值,只有当data被赋值的时候(说明ItemEditor被触发了哦),才需要去做点事情,比如画个输入框什么的。这里你就可以控制了,根据data的内容来选择画还是不画(不画的结果就是空白Canvas)。还有newData属性,这个属性是被AdvancedDataGrid调用的,当完成输入后需要讲新值返回回去,记得AdvancedDataGridColumn的editorDataField属性么,就是它。

<mx:AdvancedDataGridColumn headerText="Intro" dataField="nIntro" sortable="false" editorDataField="newData" itemEditor="myvocal.visual.IntroField"/>

标签集:TAGS:Column
回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}