操作Flex中的DataGrid,并放入TextInput编辑

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" viewSourceURL="srcview/index.html">
   
   <mx:DataGrid id="myDG" dataProvider="{customers}" rowCount="5" width="300" height="200" editable="true">
      <mx:columns>
         <mx:DataGridColumn headerText="Name" width="100" dataField="name" editable="false" editorDataField="text">
            <mx:itemRenderer>
               <mx:Component>
                  <mx:HBox horizontalScrollPolicy="off">
                     <mx:Label text="{data.name}" />
                     <mx:Spacer width="100%" />
                     <mx:Label text="+" click="outerDocument.editCell(0)" toolTip="Edit" />
                  </mx:HBox>
               </mx:Component>
            </mx:itemRenderer>
            <mx:itemEditor>
               <mx:Component>
                  <mx:TextInput text="{data.name}" />
               </mx:Component>
            </mx:itemEditor>
         </mx:DataGridColumn>
         
         <mx:DataGridColumn headerText="Addresss" dataField="address" width="200" editable="false" editorDataField="text">
            <mx:itemRenderer>
               <mx:Component>
                  <mx:HBox horizontalScrollPolicy="off">
                     <mx:Label text="{data.address}" />
                     <mx:Spacer width="100%" />
                     <mx:Label text="+" click="outerDocument.editCell(1)" toolTip="Edit" />
                  </mx:HBox>
               </mx:Component>
            </mx:itemRenderer>
            <mx:itemEditor>
               <mx:Component>
                  <mx:TextInput text="{data.address}" />
               </mx:Component>
            </mx:itemEditor>
         </mx:DataGridColumn>
      </mx:columns>
   </mx:DataGrid>
   
   <mx:Model id="custdata">
      <customers>
         <customer>
            <name>Cust1</name>
            <address>Address1</address>
         </customer>
         <customer>
            <name>Cust2</name>
            <address>Address2</address>
         </customer>
         <customer>
            <name>Cust3</name>
            <address>Address3</address>
         </customer>      
      </customers>
   </mx:Model>   

   <mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         
         [Bindable] private var customers:ArrayCollection = new ArrayCollection();

         private function init():void {
            customers = new ArrayCollection(custdata.customer);
         }
         
         public function editCell(column:Number):void {
            myDG.editedItemPosition = {columnIndex:column, rowIndex:myDG.selectedIndex}
         }
      ]]>
   </mx:Script>

</mx:Application>

 

你可能感兴趣的:(html,xml,Flex,Adobe)