모달 대화 상자를 열어 DataGrid 편집

Question

Flex DataGrid의 열을 클릭 할 때 몇 가지 질문이있는 대화 상자를 열려고합니다. 대화 상자가 닫히면 대화 상자의 정보로 해당 셀을 채 웁니다.

 public function startEdit(event:DataGridEvent):void { 
      // event.dataField is null, so we figure it out ourselves 
      var column:DataGridColumn = dgQObjects.columns[event.columnIndex]; 
      if (column.dataField == "parameters") { 
       // depending on the type, we can fill in parameters 
       var type:String = ListCollectionView(dgQObjects.dataProvider).getItemAt(event.rowIndex).type; 
       switch(type) { 
        case "Gauge": 
         event.preventDefault(); 

         quartzObjects[event.rowIndex].parameters = "foo"; 
         updateLocalStorage(); 
         dgQObjects.validateNow(); 
         break; 
        case "Indicator": 
         break; 
        case "New Row": 
         event.preventDefault(); 
         break; 
       } 
      } 

     } 

그 좋은, 그래서 그것은, 'foo는'에 '매개 변수'를 설정하지만합니다 (데이터 그리드에로 validateNow (즉, 표시되지 않습니다)는 아무것도하지 않습니다 :

는 내가 지금까지 가지고하는 것은 이것이다). 또한 Alert()를 넣으면 startEdit이 계속 트리거되고 Alertbox를 닫을 수 없습니다. 다음과 같이 그리드는 정의됩니다

<QuartzUI:DoubleClickDataGrid width="800" x="10" y="10" height="337" 
      id="dgQObjects" 
      editable="true" 
      itemEditBegin="{startEdit(event)}" 
      itemEditEnd="{checkQuartzObjects()}" 
      creationComplete="{initDataGrid()}" 
      > 

당신은 모델 객체에 데이터 바인딩을 통해이 작업을 수행해야

Answer 1

(A DoublieClickDataGrid는 데이터 그리드의 서브 클래스입니다). 너의 인생을 훨씬 편하게 해줄거야.

<s:DataGrid id="dg" dataProvider="{dp}" 
      doubleClickEnabled="true" 
      doubleClick="editSelectedItem()"> 

    <s:columns> 
     <s:ArrayList> 
      <s:GridColumn dataField="name" /> 
     </s:ArrayList> 
    </s:columns> 
</s:DataGrid> 

doubleClickEnabled는 기본적으로 false, 그래서 우리는 doubleClick 이벤트를 잡을 수 있도록 명시 적으로 설정해야 다음 데이터 그리드를 가정합니다. 우리는 단지 새로운 뷰를 생성

private function editSelectedItem():void { 
    var popup:MyEditor = new MyEditor(); 
    popup.data = dg.selectedItem as MyClass; 
    PopUpManager.addPopUp(popup, this, true); 
    PopUpManager.centerPopUp(popup); 
} 

하고 그것을 현재 선택된 데이터 그리드 항목을 통과 : 이제이 editSelectedItem() 방법을 살펴보기로하자. 그런 다음 모달 팝업으로 엽니 다. (예제를 가능한 한 간단하게 유지하기 위해 팝업을 다시 닫기위한 코드를 추가하지 않았습니다.) 이제 명이 MyEditor보기는 다음과 같습니다

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:m="net.riastar.model.*" 
     title="Edit label" 
     width="400" height="300" > 

    <fx:Declarations> 
     <m:MyClass id="data" /> 
    </fx:Declarations> 

    <s:TextInput text="@{data.name}" /> 

</s:Panel> 

우리는 MyClass 인스턴스의 name 속성을 편집 할 수 바인딩 양방향 데이터를 사용 (이 속성이 작동하지 Bindable를 표시해야합니다). 이 예제로 충분합니다 : TextInput의 값을 편집하면 백그라운드에서 DataGrid의 값이 변경되는 것을 볼 수 있습니다.