ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
フォーラム一覧   -   トピック一覧
   超ビギナー
     AdvancedDataGridに配置したラジオボタンのソート
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 トピック
sai_vowm
投稿日時: 2013-8-26 18:42
やや お馴染みさん
登録日: 2012-9-5
居住地:
投稿: 8
AdvancedDataGridに配置したラジオボタンのソート
いつもお世話になっております。
検索結果や過去ログを見させて頂いたのですが、どうしても解決できないのでご相談させて下さい。

AdvancedDataGridのカラムにitemRendererでラジオボタンを2つ配置しようとしています。
ラジオボタンはGroupNameでグループ化されており、どちらか一方のみがチェックできます。
dataProviderにはDBからPHPで取得した値を代入して、ラジオボタンの他にIDなどのデータを表示しています。
ラジオボタンの表示まではうまくいっているのですが、
データグリッドをクリックして並べ替えるとラジオボタンの値がばらばらになってしまいます。
dataBindingしているDBの配列と、itemRendererの表示の同期がとれておらず、
ソート時に手動でdataProviderを更新する必要があると予想しているのですが、未熟者でうまくいきません。

下記のサイトを参考にさせて頂きました。
http://www.mitchy-world.jp/itmemo/flex/08.htm
この実装をそっくり真似すれば確かにうまくいくのですが、
私の場合はデータをBindableにしているためか
updateの部分で「warning: unable to bind to property 'status' on class 'Object' 」と
警告が出て値が変わってくれません。

AdvancedDataGridColumnのeditableを"true"にすると、ラジオボタンをクリックしたとき
データグリッドがTextInput化してしまうのも何故か判らず苦戦しています。
コードの抜粋を記載します。お知恵をお貸し頂ければ幸いです。


<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
<mx:Script>
  <![CDATA[
    [Bindable]
    public var dataList:ArrayCollection;
    
    /**
     * 初期化
     */
    private function init():void
    {
      getDataList();

    }

    /**
     * データ取得
     */
    private function getDataList():void
    {
      // DBにアクセスし、result.dataに返るデータをdataListに代入
      // dataはdataList[i].id, dataList[i].status などのArrayCollectionです
      dataList = new ArrayCollection(ArrayUtil.toArray(result.data));
    }

  ]]>
</mx:Script>
      
<mx:VBox height="100%" width="100%">
  <mx:AdvancedDataGrid  sortExpertMode="true" id="dataList_DataGrid" dataProvider="{dataList}" width="100%" height="100%" sortableColumns="true" editable="true">
    <mx:columns>
      <mx:AdvancedDataGridColumn dataField="id" headerText="id" width="100"  editable="false"  />
      <mx:AdvancedDataGridColumn dataField="chk" headerText="chk" editorDataField="selected" width="40" rendererIsEditor="true" itemRenderer="mx.controls.CheckBox" textAlign="center" editable="true" />
      <mx:AdvancedDataGridColumn dataField="status" headerText="status" width="80" editorDataField="selected" rendererIsEditor="true" editable="false" >
        <mx:itemRenderer>
          <mx:Component>
            <mx:HBox verticalAlign="middle" horizontalAlign="center" textAlign="center">
              <mx:RadioButtonGroup id="status_rg" selectedValue="{data.status}" change="data.status=status_rg.selectedValue; outerDocument.dataList.itemUpdated(data);" />
            <mx:RadioButton groupName="status_rg"  value="1" />
            <mx:RadioButton groupName="status_rg" value="0" />
            </mx:HBox>
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
    </mx:columns>
  </mx:AdvancedDataGrid >
</mx:VBox>
</mx:TitleWindow>

taiga
投稿日時: 2013-9-18 21:01
管理人
登録日: 2007-5-28
居住地: 東京
投稿: 83
Re: AdvancedDataGridに配置したラジオボタンのソート
こんにちは。

引用:
sai_vowmさんは書きました:
私の場合はデータをBindableにしているためか
updateの部分で「warning: unable to bind to property 'status' on class 'Object' 」と
警告が出て値が変わってくれません。

AdvancedDataGridColumnのeditableを"true"にすると、ラジオボタンをクリックしたとき
データグリッドがTextInput化してしまうのも何故か判らず苦戦しています。

久々に作ってみました。
まず itemRenderer ですが、別クラスで用意します。
このとき、バインディングに頼らなくても動作するよう getter/setter の data を拡張します。
あと、id を指定した RadioButtonGroup をレンダラとして利用すると挙動が怪しくなるので ( 不要なので ) 外します。
ざっくり実装ですが、以下のような感じです。

CustomADGRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx        = "http://www.adobe.com/2006/mxml"
verticalAlign   = "middle"
horizontalAlign = "center"
textAlign       = "center"
>

<mx:Script>
<![CDATA[
    public override function get data():Object {
        return _data;
    }
    public override function set data(value:Object):void {
        _data = value;
        invalidateDisplayList();
    }
    private var _data:Object;
    protected override function createChildren():void {
        super.createChildren();
        rb0.addEventListener(Event.CHANGE, radioButtonChangeHandler);
        rb1.addEventListener(Event.CHANGE, radioButtonChangeHandler);
    }
    protected function radioButtonChangeHandler(event:Event):void {
        callLater(
            function():void {
                if(rb0.selected) {
                    _data.status = 0;
                }
                else if(rb1.selected) {
                    _data.status = 1;
                }
            }
        );
    }
    protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        if(_data != null && _data.hasOwnProperty("status")) {
            if(rb0 != null && rb1 != null) {
                rb0.selected = ( _data.status == 0 );
                rb1.selected = ( _data.status == 1 );
            }
        }
    }
]]>
</mx:Script>
<mx:RadioButton id="rb1" value="1" />
<mx:RadioButton id="rb0" value="0" />
</mx:HBox>


そして、AdvancedDataGridColumn の実装にも少々手を入れます。
editable=false に変更して、上記レンダラをセットします。

<mx:AdvancedDataGridColumn dataField="status" headerText="status" editable="false" width="80" itemRenderer="CustomADGRenderer" />


これでいかがでしょう。


----------------
taiga
http://taiga.jp/
Principle Classmethod, Inc.

【 Flex 4 プログラミングガイド発売中】

sai_vowm
投稿日時: 2013-9-22 17:15
やや お馴染みさん
登録日: 2012-9-5
居住地:
投稿: 8
Re: AdvancedDataGridに配置したラジオボタンのソート
taiga様

お世話になっております。ご返信大変ありがとうございます。
早速プログラムに組み込んでみたいと思います。
取り急ぎ御礼申し上げます。

sai_vowm
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を