Combobox itemrenderer와 함께 Flex Datagrid

StackOverflow https://stackoverflow.com/questions/1408729

  •  05-07-2019
  •  | 
  •  

문제

플렉스 (3.4) 데이터 그 리드 내부에 콤보 박스를 포함시키는 "올바른"방법을 알아 내려고 노력하고 있습니다. 권리에 의해 (예 :이 페이지에 따른 http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-editor-example/) 쉬워야하지만, 나는이 일을 할 수 없다.

위에서 링크 된 예제의 차이점은 내 디스플레이 값 (사용자가 보는 것)이 데이터 제공 업체에서 선택하고 저장하려는 ID 값과 다르다는 것입니다.

그래서 내가 가진 것은 다음과 같습니다.

<mx:DataGridColumn headerText="Type" width="200" dataField="TransactionTypeID" editorDataField="value" textAlign="center" editable="true" rendererIsEditor="true">
    <mx:itemRenderer>
        <mx:Component>
            <mx:ComboBox dataProvider="{parentDocument.transactionTypesData}"/>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

어디에 transactionTypesData '데이터'와 '라벨'필드가 모두 있습니다 ( ComboBox - 왜 지구상에서는 Labelfield와 Idfield를 모두 제공하지 않을 것입니다).

어쨌든 위의 MXML 코드는 두 가지 방식으로 작동하지 않습니다.

  1. 콤보 상자는 선택한 항목과 함께 표시되지 않습니다.
  2. 항목을 선택한 후에는 선택한 항목을 데이터 저장소에 다시 저장하지 않습니다.

그렇다면 비슷한 상황이 발생 했습니까?

도움이 되었습니까?

해결책

Jeff의 답변은 이것에 대한 한 가지 접근 방식에 대한 부분적인 답변입니다 ( http://flex.gunua.com/?p=119 이 효과가 좋은 효과에 사용되는 완전한 예)는 내가 원하는만큼 일반적이지 않습니다.

고맙게도, 나는 마침내 큰 도움을 찾았다 전문가 교환 (Hobbit72의 답변)는 그리드에서 ItemRenderer로 작동하는 사용자 정의 구성 요소를 만드는 방법을 설명합니다. 콤보 상자를 항목 사전자로 사용하여 해당 코드를 확장했습니다. 전체 구성 요소는 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    dataChange="setSelected()" 
    change="onSelectionChange(event)"
    focusEnabled="true">
    <mx:Script>
        <![CDATA[
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;
            import mx.controls.dataGridClasses.DataGridListData;

            private var _ownerData:Object;
            private var _lookupField:String = "value";

            // When using this component as an itemEditor rather than an itemRenderer
            // then set ' editorDataField="selectedItemKey"' on the column to 
            // ensure that changes to the ComboBox are propogated.
            [Bindable] public var selectedItemKey:Object;

            public function set lookupField (value:String) : void {
                if(value) {
                    _lookupField = value;
                    setSelected();
                }
            }           
            override public function set data (value:Object) : void {
                if(value) {                    
                    _ownerData = value;
                    setSelected();
                }
            }
            override public function get data() : Object {
                return _ownerData;
            }            
            private function setSelected() : void {
                if (dataProvider && _ownerData) {
                    var col:DataGridListData = DataGridListData(listData);
                    for each (var dp:Object in dataProvider) {
                        if (dp[_lookupField] == _ownerData[col.dataField]) {
                            selectedItem = dp;
                            selectedItemKey = _ownerData[col.dataField];
                            return;     
                        }
                    }                    
                }
                selectedItem = null;
            }
            private function onSelectionChange (e:ListEvent) : void {
                if (selectedItem && _ownerData) {                    
                    var col:DataGridListData = DataGridListData(listData);
                    _ownerData[col.dataField] = selectedItem[_lookupField];
                    selectedItemKey = selectedItem[_lookupField];
                }
            }                   
        ]]>
    </mx:Script>    
</mx:ComboBox>

이 구성 요소를 사용하는 것은 간단합니다. ItemRenderer로서 :

<mx:DataGridColumn headerText="Child" dataField="PersonID" editable="false" textAlign="center">
  <mx:itemRenderer>
    <mx:Component>
      <fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true))"/>
    </mx:Component>
  </mx:itemRenderer>                      
</mx:DataGridColumn>

이 구성 요소를 사용하는 것은 간단합니다. 그리고 항목 편집기 :

<mx:DataGridColumn labelFunction="lookupChildName" headerText="Child" dataField="PersonID" editable="true" editorDataField="selectedItemKey">
    <mx:itemEditor>
        <mx:Component>
            <fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true))"/>
        </mx:Component>
     </mx:itemEditor>      
</mx:DataGridColumn>

항목 편집기로 사용하면 사용자 정의 LabelFunction (내 경우 PersonID에서 이름을 찾는)을 사용해야합니다. 그렇지 않으면 필드가 편집되지 않을 때 그리드의 키 만 볼 수 있습니다 (문제가 아닙니다. 키/값이 동일하다면).

제 경우에는 항목 포커스 아웃 이벤트가 사용자에게 즉각적인 피드백을 제공하기 위해 전망하기를 원했습니다 (내 DataGrid는 itemFocusOut="handleChange()"), 따라서 change 항목 _focus_out 이벤트 생성 이벤트.

사용자가 셀을 클릭하여 편집 할 때만 표시되는 Combobox를 신경 쓰지 않을 때 항목 사전으로 Combobox를 가질 수있는 간단한 방법이있을 수 있습니다. 내가 원했던 접근법은 모든 행에 대한 Datagrid에 콤보 상자를 보여주고 편집 가능하고 괜찮은 이벤트 프로 점성을 제공하는 일반적인 방법이었습니다.

다른 팁

DataGrids에 ItemRenderer를 추가하는 가장 쉬운 방법은 사용자 정의 MXML 구성 요소를 만드는 것입니다. 귀하의 경우 캔버스, hbox 또는 vbox를 사용자 정의 구성 요소로 만들고 ComboBox를 어린이로 추가합니다. DataGrid 자체에 DataProvider를 설정 한 다음 itemRenderer를 열에 할당 한 다음 ItemRenderer의 설정 데이터 기능을 사용하여 액세스하십시오. 아래에 표시된대로 해당 인스턴스에 대한 주어진 데이터 제공자의 모든 데이터 :

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

        override public function set data(value:Object):void{
                    trace(value.data);
                    trace(value.name);
        }
    ]]>
   </mx:Script>

<mx:ComboBox width="100%" height="100%" id="myComboBox"/>
 </mx:HBox>

이 방법은 ItemRenderer의 각 인스턴스에 대해 호출됩니다.

제 경우에는 열 중 하나에 DropdownListbox를 사용하는 ItemRenderer가있는 Spark Datagrid를 사용했습니다. 내 문제는 항목 목록이 변경되면 DropdownList가 새로운 Dataprovider로 업데이트되지 않는다는 것입니다. 이를 해결하기 위해 DropdownListbox (Itemrenderer)의 일부로 DropdownListbox 용 Dataprovider를 전달한 다음 데이터의 세터를 재정의하여 DropdownLlistbox의 Dataprovider를 할당해야했습니다. 아마 약간의 오버 헤드 일 것입니다. 그러나 누군가가 더 나은 솔루션을 가지고 있다면, 저에게 알려주십시오.

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
    <![CDATA[
        override public function set data(v : Object) : void {
            super.data = v;
            if (v == null)
                return;
            dropDown.dataProvider = data.dataProvider;
        }
    ]]>
</fx:Script>
<s:DropDownList id="dropDown" width="100%" height="100%" dataProvider="{data.dataProvider}" labelField="name"/>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top