ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
フォーラム一覧   -   トピック一覧
   超ビギナー
     CheckBoxを表示したDataGridColumnへの値の設定について
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 トピック
imari
投稿日時: 2007-8-17 19:14
お馴染みさん
登録日: 2007-2-9
居住地:
投稿: 19
CheckBoxを表示したDataGridColumnへの値の設定について
毎々お世話になっております、imariです。

DataGridにCheckBoxを表示するための共通コンポーネントを以下の通り作成したのですが、
設定するための元データがtrue/falseではなく、0/1で保持しているため、チェックボックスに値の反映が出来なくて困っております。
#直接dataField名を指定すれば反映はできるのですが、汎用的に使いたいため、直指定をしない方法で・・・

CheckBoxColumn.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:headerRenderer>
    <mx:Component>
      <mx:Label textAlign="center"/>  
    </mx:Component>
  </mx:headerRenderer>
  <mx:itemRenderer>
    <mx:Component>
      <mx:Box horizontalAlign="center" verticalAlign="middle">
        <mx:CheckBox width="12" selected="{getValue(data.FLG_A)}">  //←ココで直指定すれば値は取得可能
          <mx:Script>
            <![CDATA[
              private function getValue(val:String):Boolean{
                if(val == "1"){
                  return true;
                }else{
                  return false;
                }
              }
            ]]>
          </mx:Script>
        </mx:CheckBox>
      </mx:Box>
    </mx:Component>
  </mx:itemRenderer>
</mx:DataGridColumn>


main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cp="comParts.*" initialize="init()">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      private function init():void{
        var aryData:ArrayCollection = new ArrayCollection();
        
        var objData1:Object = {"FLG_A":"0","FLG_B":"0"};
        var objData2:Object = {"FLG_A":"1","FLG_B":"0"};
        var objData3:Object = {"FLG_A":"0","FLG_B":"1"};
        var objData4:Object = {"FLG_A":"1","FLG_B":"1"};

        aryData.addItem(objData1);
        aryData.addItem(objData2);
        aryData.addItem(objData3);
        aryData.addItem(objData4);

        dg.dataProvider = aryData;
      }
    ]]>
  </mx:Script>
  <mx:DataGrid id="dg">
    <mx:columns>
      <mx:Array>
        <cp:CheckBoxColumn dataField="FLG_A" headerText="フラグA" textAlign="center"/>
        <cp:CheckBoxColumn dataField="FLG_B" headerText="フラグB" textAlign="center"/>
      </mx:Array>
    </mx:columns>
  </mx:DataGrid>
</mx:Application>


dataField名を直接指定しなくても値が取得できる方法をご存知の方がいらっしゃいましたらご教示頂けないでしょうか?
よろしくお願いいたします。
neworder
投稿日時: 2007-8-18 1:01
ご主人様
登録日: 2007-7-14
居住地: 東京
投稿: 176
Re: CheckBoxを表示したDataGridColumnへの値の設定について
dataField を itemRenderer 側から取得する方法ですが、
IDropInListItemRenderer を実装している場合は listData を参照すればいいのですが、
そうでないときは意外と難しいかもしれません。
以下の2つの方法を考えました。

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.core.IFactory;
      import mx.core.ClassFactory;
      
      override public function set itemRenderer(value:IFactory):void {
        super.itemRenderer = value;
        ClassFactory(value).properties = { column: this }
      }
    ]]>
  </mx:Script>
  <mx:headerRenderer>
    <mx:Component>
      <mx:Label textAlign="center"/>  
    </mx:Component>
  </mx:headerRenderer>
  <mx:itemRenderer>
    <mx:Component>
      <mx:Box horizontalAlign="center" verticalAlign="middle">
        <mx:CheckBox width="12" selected="{getValue(data)}">
          <mx:Script>
            <![CDATA[
              import mx.controls.dataGridClasses.DataGridColumn;
              
              public var column:DataGridColumn;
              private function getValue(dataObj:*):Boolean{
                if (dataObj && column && column.dataField)
                  var val:String = dataObj[column.dataField];
              	
                if(val == "1"){
                  return true;
                }else{
                  return false;
                }
              }
            ]]>
          </mx:Script>
        </mx:CheckBox>
      </mx:Box>
    </mx:Component>
  </mx:itemRenderer>
</mx:DataGridColumn>


getValue を少し書き換えています。itemRenderer のインスタンス生成のときに、
DataGridColumn の参照を col という変数に格納するようにしています。

あるいはもっと簡単なやりかたもあります。
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:headerRenderer>
    <mx:Component>
      <mx:Label textAlign="center"/>  
    </mx:Component>
  </mx:headerRenderer>
  <mx:itemRenderer>
    <mx:Component>
      <mx:Box horizontalAlign="center" verticalAlign="middle">
        <mx:CheckBox width="12" selected="{getValue(data)}">
          <mx:Script>
            <![CDATA[
              private function getValue(dataObj:*):Boolean{
                if (dataObj && styleName && styleName.dataField)
                  var val:String = dataObj[styleName.dataField];
              	
                if(val == "1"){
                  return true;
                }else{
                  return false;
                }
              }
            ]]>
          </mx:Script>
        </mx:CheckBox>
      </mx:Box>
    </mx:Component>
  </mx:itemRenderer>
</mx:DataGridColumn>


これは styleName に DataGridColumn のインスタンス自信が格納されることを利用するものです。
上の方法に比べると裏ワザ的だと思います。

あるいは、IDropInListItemRenderer を実装する方法もあるかと思います。
そのためには Box 以下の定義を別ファイルに分けて、
implements="mx.controls.listClasses.IDropInListItemRenderer"
を追加し、set listData, get listData を定義します。これが一番正統な方法といえると思います。
imari
投稿日時: 2007-8-20 10:22
お馴染みさん
登録日: 2007-2-9
居住地:
投稿: 19
Re: CheckBoxを表示したDataGridColumnへの値の設定について
>neworderさま

お世話になります、imariです。

ご教示いただいた方法(上の方法で実装してみました)で無事、期待通りの動きをしてくれるようになりました。
ありがとうございます。


[追記]
最終的に以下の様にコンポーネントを作成しました。
ココをこうしたほうがいいのでは?等のアドバイスがありましたらご指摘ください。

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.core.IFactory;
            import mx.core.ClassFactory;
  
            override public function set itemRenderer(value:IFactory):void{
                super.itemRenderer = value;
                ClassFactory(value).properties = {column:this}
            }
        ]]>
    </mx:Script>
    <mx:headerRenderer>
        <mx:Component>
            <mx:Label textAlign="center"/>    
        </mx:Component>
    </mx:headerRenderer>
    <mx:itemRenderer>
        <mx:Component>
            <mx:Box horizontalAlign="center" verticalAlign="middle">
                <mx:CheckBox width="12" selected="{getValue(data)}" change="setValue(event, data)">
                    <mx:Script>
                        <![CDATA[
                            import mx.controls.dataGridClasses.DataGridColumn;

                            public var column:DataGridColumn;
                            private const ON:String = "1";
                            private const OFF:String = "0";

                            /**
                             * チェックボックスのON/OFFを制御
                             * 1:ON、0:OFF
                             */
                            private function getValue(dataObj:*):Boolean{
                                var val:String = "";
                                if (dataObj && column && column.dataField){
                                    val = dataObj[column.dataField];
                                }
                                
                                if(val == ON){
                                    return true;
                                }else{
                                    return false;
                                }
                            }
                            
                            /**
                             * チェックボックスのON/OFFをdataProviderに設定
                             * ON:1、OFF:0
                             */
                            private function setValue(e:Event, dataObj:*):void{
                                if (dataObj && column && column.dataField){
                                    if(e.currentTarget.selected){
                                        dataObj[column.dataField] = ON;
                                    }else{
                                        dataObj[column.dataField] = OFF;
                                    }
                                }
                            }
                            
                        ]]>
                    </mx:Script>
                </mx:CheckBox>
            </mx:Box>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を