Flex中如何给DataGrid控件的项目添加一个可编辑TextArea/TextInput的例子

By Minidxer | October 12, 2008

接下来的例子演示了Flex中如何给DataGrid控件的项目添加一个可编辑TextArea/TextInput，单击控件内的项目时，自动进入编辑状态。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:XML id="itemsXML" source="data/items.xml" />
  8.  
  9.     <mx:DataGrid id="dataGrid"
  10.             dataProvider="{itemsXML.item}"
  11.             variableRowHeight="true"
  12.             editable="true"
  13.             width="100%"
  14.             height="100%">
  15.         <mx:columns>
  16.             <mx:DataGridColumn id="idColumn"
  17.                     dataField="@id"
  18.                     editable="false"
  19.                     headerText="ID" />
  20.             <mx:DataGridColumn id="descColumnTextInput"
  21.                     dataField="@desc"
  22.                     editable="true"
  23.                     wordWrap="true"
  24.                     headerText="Desc (TextInput)" />
  25.             <mx:DataGridColumn id="descColumnTextArea"
  26.                     dataField="@desc"
  27.                     editable="true"
  28.                     wordWrap="true"
  29.                     itemEditor="mx.controls.TextArea"
  30.                     editorUsesEnterKey="true"
  31.                     headerText="Desc (TextArea)" />
  32.         </mx:columns>
  33.     </mx:DataGrid>
  34.  
  35. </mx:Application>

下面是items.xml文件：

Download: items.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <items>
  3.     <item id="1" desc="The quick brown fox jumped over the lazy dog." />
  4.     <item id="2" desc="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
  5.     <item id="3" desc="Pellentesque nonummy aliquet metus." />
  6.     <item id="4" desc="Nullam enim." />
  7.     <item id="5" desc="Nullam sollicitudin sodales diam." />
  8.     <item id="6" desc="Praesent quis tellus vel erat tristique placerat." />
  9.     <item id="7" desc="Sed egestas, enim a convallis auctor, nisl tellus tincidunt nibh, vitae tempus mauris risus at arcu." />
  10.     <item id="8" desc="Suspendisse laoreet sem eget ipsum porta consequat." />
  11.     <item id="9" desc="Ut imperdiet felis quis orci." />
  12.     <item id="10" desc="Phasellus tempus ante eu nisl." />
  13.     <item id="11" desc="Donec velit sem, rutrum ac, bibendum sed, mattis ac, odio." />
  14.     <item id="12" desc="Fusce mauris turpis, vehicula nec, mattis et, dapibus quis, arcu." />
  15.     <item id="13" desc="Morbi tincidunt volutpat justo." />
  16.     <item id="14" desc="Nam urna." />
  17.     <item id="15" desc="Mauris est dui, aliquet at, venenatis tempus, eleifend a, pede." />
  18.     <item id="16" desc="Vestibulum porttitor arcu sit amet nulla." />
  19.     <item id="17" desc="Nulla vitae sapien." />
  20. </items>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid, TextInput | No Comments » | 1,397 views Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll