Adobe Flex でラジオボタンの列を作成する
https://stackoverflow.com/questions/112036
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
AdvancedDataGrid ウィジェットを使用しており、2 つの列をラジオ ボタンにしたいと考えています。各列は独自の RadioButtonGroup です。必要な mxxml はすべて揃っていると思っていましたが、奇妙な動作の問題が発生しています。上下にスクロールすると、ボタンの値が変わります。選択されているボタンは選択解除され、選択されていないボタンは選択されます。このバグについて何か知っている人はいますか?別の方法でこれに対処する必要がありますか。-- これは私がやろうとしていることの簡潔な例です。
<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>
更新しました （請求書ありがとう！）
大丈夫！うまくいきなさい。法案の提案からいくつかの変更を加える必要がありました。主に ObjectProxy で ArrayCollection を使用するため、バインド可能かつ動的でした。奇妙な点が 1 つあります。構築時に配列に値を入力した場合、最初の行のボタンを選択できませんでした。CreationComplete イベントが発生するまでそれを遅らせる必要がありました (いずれにしてもデータベースからグリッドにデータを入力するつもりなので、これは問題ありません)。
<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>
解決
ここで何が起こっているのかというと、Flex は、 見える 列。スクロールすると、それらのインスタンスがリサイクルされます。したがって、下にスクロールすると、最初の行の最初の列を描画していた RadioButton オブジェクトが、代わりに 7 行目の最初の列を描画するように変更されている可能性があります。これが発生するたびに、Flex は itemRenderer の「data」プロパティをリセットします。
したがって、データには 15 行がありますが、ラジオボタンは 12 個 (表示されている 6 行のうち「左」に 6 個、「右」に 6 個) しかなく、ご想像のとおり 30 個のラジオボタンはありません。あなただけであれば、これは大きな問題ではありません 表示する しかし、更新を許可するとさらに問題が大きくなります。
表示の問題を解決するには、列に「dataField」を設定する代わりに、RadioButton の「selected」プロパティを itemRenderer の data.left (または right) 値にバインドします。次に、dataProvider 内の項目を「バインド可能」にする必要があります。
更新の問題を解決するには、dataProvider 項目値に直接バインドすることになるため、それらを必ず更新する必要があります。項目ごとに RadioButton が 1 つないため、別のスキームが必要になります。この場合、「true」に設定される「selected」プロパティを除いて、各項目の left/right プロパティを「false」に設定するハンドラーを組み込みます。
これらの考えに基づいてサンプルコードを更新しました。次のようなことを試してください。
<?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>
他のヒント
これを再現しました。ADG のバグである可能性が高く、ここでいくつかのバグに遭遇しました。(これは bugs.adobe.com では見つかりませんでしたが、検索は最悪でした)。
Flex 3.0.3 または夜間ビルドを試すことができます。 ここ (警告、かなり壊れている可能性があります)、修正されたかどうかを確認するか、カスタム レンダラーを実装してみることもできますが、正しく理解するのは面倒です。
所属していません StackOverflow
