فليكس DataGrid مع تحرير وسرد itemRenderer

Question

أنا ذاهب الغيار في محاولة لمعرفة "الصحيح" الطريق إلى تضمين عنصر تحكم تحرير وسرد داخل فليكس (3.4) DataGrid.من حقوق (مثلا ، ووفقا هذه الصفحة http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/) ينبغي أن يكون من السهل, ولكن لا أستطيع لحياة لي جعل هذا العمل.

الفرق علي سبيل المثال مرتبطة أعلاه على أن قيمة العرض (على ما يراه المستخدم) مختلفة إلى قيمة معرف أريد أن حدد على متجر في موفر البيانات.

فما لدي هو:

<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 سواء 'البيانات' و 'label' الميادين (حسب ما ComboBox - لماذا لا نقدم على حد سواء labelField و idField أنا أعرف أبدا).

على أي حال, سبق MXML الكود لا يعمل بطريقتين:

1. مربع التحرير والسرد لا تظهر مع أي العنصر المحدد.
2. بعد اختيار البند ، فإنه لا تخزن مرة أخرى أن العنصر المحدد إلى مخزن البيانات.

لذا أي شخص لديه حالة مماثلة تعمل ؟

Answer 1

بينما جيف إجابة جزئية الإجابة على نهج واحد هذا (انظر http://flex.gunua.com/?p=119 لاستكمال مثال على ذلك تستخدم تأثير جيد), أنها ليست عامة كما أردت.

الحمد لله أخيرا وجدت مساعدة كبيرة على تبادل الخبراء (الإجابات من قبل hobbit72) توضح هذه المقالة كيفية إنشاء مخصص المكون الذي يعمل في الشبكة كما ItemRenderer.لقد مددت رمز لدعم أيضا باستخدام مربع التحرير والسرد كما ItemEditor كذلك.كامل مكون على النحو التالي:

<?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>

استخدام هذا العنصر هو على التوالي إلى الأمام.و ItemEditor:

<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>

لاحظ أنه عند استخدامه باعتباره ItemEditor, مخصص labelFunction (التي تبدو حتى اسم من PersonID في حالتي) يجب أن تستخدم ، وإلا يمكنك فقط رؤية المفتاح في الشبكة عندما يكون الحقل لا يتم تحريرها (لا مشكلة إذا المفاتيح/القيم هي نفسها).

لاحظ أنه في حالة أردت البند التركيز الحدث إلى نشر ما يصل إلى تقديم التغذية الراجعة الفورية المستخدم (بلدي DataGrid itemFocusOut="handleChange()") ، ومن ثم change الحدث خلق ITEM_FOCUS_OUT الحدث.

لاحظ أنه ربما يكون هناك أبسط الطرق إلى عنصر تحكم تحرير وسرد كما ItemEditor عندما كنت لا تمانع في مربع تحرير وسرد فقط تظهر عندما يقوم المستخدم بالنقر على الخلية إلى تحرير.نهج أردت عام طريقة لإظهار مربع التحرير والسرد في DataGrid لجميع الصفوف ، ويجري للتحرير و لائقة الحدث propogation.

Answer 2

أسهل طريقة لإضافة itemRenderers إلى DataGrids هو جعل العرف MXML المكون.في حالة إجراء قماش ، HBox ، أو VBox باعتبارها مكون مخصص و إضافة مربع تحرير وسرد الطفل.تعيين dataProvider على dataGrid نفسها وتعيين 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

Answer 3

في حالتي أنا استخدم شرارة datagrid حيث أحد الأعمدة لديه ItemRenderer أن يستعين DropDownListBox.مشكلتي أنه عندما البند بلدي قائمة التغيير ، DropDownLists لا الحصول على تحديث مع dataProvider.لحل هذه ، كان لتمرير dataProvider عن DropDownListBox كجزء من البيانات (من ItemRenderer) ، ثم تجاوز اضع البيانات فقط تعيين 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"/>