2008-09-21 90 views
0

我正在使用AdvancedDataGrid小部件,我希望兩列是單選按鈕,其中每列都是它自己的RadioButtonGroup。我以爲我有所有必要的mxxml,但我遇到了一個奇怪的行爲問題。當我上下滾動時,按鈕更改值!所選按鈕變爲取消選擇,未選中按鈕變爲選中狀態。任何人都有關於這個錯誤的線索?我是否應該以不同的方式來討論這個問題。 - 這是我試圖做的一個簡單的例子。在Adobe Flex中創建一個RadioButtons列

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:RadioButtonGroup id="leftAxisGrp" /> 
    <mx:RadioButtonGroup id="rightAxisGrp"> 
    <mx:change> 
     <![CDATA[ 
     trace (rightAxisGrp.selection); 
     trace (rightAxisGrp.selection.data.name); 
     ]]> 
    </mx:change> 
    </mx:RadioButtonGroup> 
    <mx:AdvancedDataGrid 
     id="readingsGrid" 
     designViewDataType="flat" 
     height="150" width="400" 
     sortExpertMode="true" 
     selectable="false"> 
    <mx:columns> 
     <mx:AdvancedDataGridColumn 
      headerText="L" width="25" paddingLeft="6" 
      dataField="left" sortable="false"> 
     <mx:itemRenderer> 
      <mx:Component> 
      <mx:RadioButton groupName="leftAxisGrp" /> 
      </mx:Component> 
     </mx:itemRenderer> 
     </mx:AdvancedDataGridColumn> 
     <mx:AdvancedDataGridColumn 
      headerText="R" width="25" paddingLeft="6" 
      dataField="right" sortable="false"> 
     <mx:itemRenderer> 
      <mx:Component> 
      <mx:RadioButton groupName="rightAxisGrp" /> 
      </mx:Component> 
     </mx:itemRenderer> 
     </mx:AdvancedDataGridColumn> 
     <mx:AdvancedDataGridColumn headerText="" dataField="name" /> 
    </mx:columns> 
    <mx:dataProvider> 
     <mx:Array> 
     <mx:Object left="false" right="false" name="Reddish-gray Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Golden-brown Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Northern Rufous Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Sambirano Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Simmons' Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Pygmy Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Brown Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Madame Berthe's Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Goodman's Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Jolly's Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Mittermeier's Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Claire's Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Danfoss' Mouse Lemur" /> 
     <mx:Object left="false" right="false" name="Lokobe Mouse Lemur" /> 
     <mx:Object left="true" right="true" name="Bongolava Mouse Lemur" /> 
     </mx:Array> 
    </mx:dataProvider> 
    </mx:AdvancedDataGrid> 
</mx:WindowedApplication> 

修訂(感謝賬單!)

好吧!開始工作。我不得不從法案的建議中做出一些改變。主要使用ArrayCollection和ObjectProxy,因此它既是可綁定的又是動態的。一個奇怪的事情 - 如果我在施工時填入數組,我無法在第一行中選擇一個按鈕;我不得不拖延,直到creationComplete事件被解僱(這很好,因爲我要從db填充網格)。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
    <![CDATA[ 
     import mx.utils.ObjectProxy; 
     import mx.collections.ArrayCollection; 

     [Bindable] 
     private var myData:ArrayCollection = new ArrayCollection(); 

     private function selectItem (selObject:Object, property:String) : void 
     { 
     for each (var obj:ObjectProxy in myData) { 
      obj[property] = (obj.name === selObject.name); 
     } 
     readingsGrid.invalidateDisplayList(); 
     } 
    ]]> 
    </mx:Script> 
    <mx:RadioButtonGroup id="leftAxisGrp"> 
    <mx:change> 
     <![CDATA[ 
     selectItem (leftAxisGrp.selectedValue, 'left'); 
     ]]> 
    </mx:change> 
    </mx:RadioButtonGroup> 
    <mx:RadioButtonGroup id="rightAxisGrp"> 
    <mx:change> 
     <![CDATA[ 
     selectItem (rightAxisGrp.selectedValue, 'right'); 
     ]]> 
    </mx:change> 
    </mx:RadioButtonGroup> 
    <mx:AdvancedDataGrid 
     id="readingsGrid" 
     designViewDataType="flat" 
     dataProvider="{myData}" 
     sortExpertMode="true" 
     height="150" width="400" 
     selectable="false"> 
    <mx:columns> 
     <mx:AdvancedDataGridColumn id="leftCol" 
      headerText="L" width="25" paddingLeft="6" sortable="false"> 
     <mx:itemRenderer> 
      <mx:Component> 
      <mx:RadioButton groupName="leftAxisGrp" 
       buttonMode="true" value="{data}" selected="{data.left}" /> 
      </mx:Component> 
     </mx:itemRenderer> 
     </mx:AdvancedDataGridColumn> 
     <mx:AdvancedDataGridColumn id="rightCol" 
      headerText="R" width="25" paddingLeft="6" sortable="false"> 
     <mx:itemRenderer> 
      <mx:Component> 
      <mx:RadioButton groupName="rightAxisGrp" 
       buttonMode="true" value="{data}" selected="{data.right}" /> 
      </mx:Component> 
     </mx:itemRenderer> 
     </mx:AdvancedDataGridColumn> 
     <mx:AdvancedDataGridColumn headerText="" dataField="name" /> 
    </mx:columns> 
    <mx:creationComplete> 
     <![CDATA[ 
     myData.addItem(new ObjectProxy ({ left:true, right:true, name:"Golden-brown Mouse Lemur" })); 
     myData.addItem(new ObjectProxy ({ left:false, right:false, name:"Reddish-gray Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Northern Rufous Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Sambirano Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Simmons' Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Pygmy Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Brown Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Madame Berthe's Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Goodman's Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Jolly's Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Mittermeier's Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Claire's Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Danfoss' Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Lokobe Mouse Lemur" })); 
     myData.addItem( new ObjectProxy ({ left:false, right:false, name:"Bongolava Mouse Lemur" }));    
     ]]> 
    </mx:creationComplete> 
    </mx:AdvancedDataGrid> 
</mx:WindowedApplication> 

回答

1

這裏發生的事情是,Flex僅爲可見的列創建itemRenderer實例。當您滾動時,這些實例會被回收。因此,如果向下滾動,正在繪製第一行第一列的RadioButton對象現在可能已更改爲繪製第七行的第一列。每當發生這種情況時,Flex會重置itemRenderer的「數據」屬性。

因此,雖然有15行數據,但您可能會預期只有12個RadioButton(6個用於「左」,6個用於6個可見行的「右」),而不是30個RadioButton。如果您只有顯示這個選擇,這不是一個大問題,但是當您允許更新時,它會變成更多問題。

要解決顯示問題,您可以將RadioButton的「selected」屬性綁定到itemRenderer的data.left(或right)值,而不是在列上設置「dataField」。然後,您需要將dataProvider中的項目設置爲「Bindable」。

要修復更新問題,由於您將直接綁定到dataProvider項目值,因此您需要確保更新它們。由於每個項目沒有一個RadioButton,因此您需要另一個方案。在這種情況下,我放入一個處理程序,並將每個項目的左/右屬性設置爲「false」,除了「selected」之外,它被設置爲「true」。

我基於這些想法更新了示例代碼。試試這樣的:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application layout="absolute" 
    xmlns:my="*" 
    xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:RadioButtonGroup id="leftAxisGrp" 
     change="selectItem(leftAxisGrp.selectedValue, 'left');"/> 
    <mx:RadioButtonGroup id="rightAxisGrp" 
     change="selectItem(rightAxisGrp.selectedValue, 'right');"> 
    </mx:RadioButtonGroup> 
    <mx:AdvancedDataGrid 
     id="readingsGrid" 
     designViewDataType="flat" 
     height="150" width="400" 
     sortExpertMode="true" 
     selectable="false" 
     dataProvider="{adgData.object}"> 
    <mx:columns> 
     <mx:AdvancedDataGridColumn 
      headerText="L" width="25" paddingLeft="6" 
      sortable="false"> 
     <mx:itemRenderer> 
      <mx:Component> 
      <mx:RadioButton groupName="leftAxisGrp" 
       value="{data}" selected="{data.left}"/> 
      </mx:Component> 
     </mx:itemRenderer> 
     </mx:AdvancedDataGridColumn> 
     <mx:AdvancedDataGridColumn 
      headerText="R" width="25" paddingLeft="6" 
      sortable="false"> 
     <mx:itemRenderer> 
      <mx:Component> 
      <mx:RadioButton groupName="rightAxisGrp" 
       value="{data}" selected="{data.right}"/> 
      </mx:Component> 
     </mx:itemRenderer> 
     </mx:AdvancedDataGridColumn> 
     <mx:AdvancedDataGridColumn headerText="" dataField="name" /> 
    </mx:columns> 
    </mx:AdvancedDataGrid> 
    <mx:Model id="adgData"> 
     <root> 
     <object left="false" right="false" name="Reddish-gray Mouse Lemur" /> 
     <object left="false" right="false" name="Golden-brown Mouse Lemur" /> 
     <object left="false" right="false" name="Northern Rufous Mouse Lemur" /> 
     <object left="false" right="false" name="Sambirano Mouse Lemur" /> 
     <object left="false" right="false" name="Simmons' Mouse Lemur" /> 
     <object left="false" right="false" name="Pygmy Mouse Lemur" /> 
     <object left="false" right="false" name="Brown Mouse Lemur" /> 
     <object left="false" right="false" name="Madame Berthe's Mouse Lemur" /> 
     <object left="false" right="false" name="Goodman's Mouse Lemur" /> 
     <object left="false" right="false" name="Jolly's Mouse Lemur" /> 
     <object left="false" right="false" name="Mittermeier's Mouse Lemur" /> 
     <object left="false" right="false" name="Claire's Mouse Lemur" /> 
     <object left="false" right="false" name="Danfoss' Mouse Lemur" /> 
     <object left="false" right="false" name="Lokobe Mouse Lemur" /> 
     <object left="true" right="true" name="Bongolava Mouse Lemur" /> 
     </root> 
    </mx:Model> 
    <mx:Script> 
    <![CDATA[ 
     private function selectItem(selObject:Object, property:String) : void { 
      for each(var obj:Object in adgData.object) { 
       obj[property] = (obj === selObject); 
      } 
      readingsGrid.invalidateDisplayList(); 
     } 
    ]]> 
    </mx:Script> 
</mx:Application> 
0

轉載了此內容。可能是一個ADG錯誤,我們在這裏遇到了幾個。 (在bugs.adobe.com上沒有找到這個,但他們的搜索很糟糕)。您可以嘗試Flex 3.0.3或每晚構建here(警告,可能會很糟糕),看看他們是否已經修復它,或者您可以嘗試實現自定義渲染器,但這是一個很痛苦的事情得到正確。