1月 18, 2011
FlashのDataGridにボタンを入れる
検索すると結構ソースが落ちてるがほとんどFlex向け。なのでFlash用の書き方を乗せておくことにした。ボタンをクリックしたら該当行のデータを取り出す。
This movie requires Flash Player 9.0.0
ドキュメントクラス
package { import flash.display.MovieClip; import fl.controls.dataGridClasses.DataGridColumn; import fl.data.DataProvider; import fl.events.ListEvent; /** * ... * @author reno */ public class main extends MovieClip { public function main() { //ここはDataGridの設定。 var _id:DataGridColumn = new DataGridColumn("id"); _id.headerText = "ID"; _id.width = 40; myDG.addColumn(_id); var _nam:DataGridColumn = new DataGridColumn("name"); _nam.headerText = "名前"; _nam.width = 80; myDG.addColumn(_nam); var _age:DataGridColumn = new DataGridColumn("age"); _age.headerText = "年齢"; _age.width = 40; myDG.addColumn(_age); var _address:DataGridColumn = new DataGridColumn("address"); _address.headerText = "住所"; _address.width = 207; myDG.addColumn(_address); var _btn:DataGridColumn = new DataGridColumn("btn"); _btn.headerText = "詳細"; _btn.width = 83; myDG.addColumn(_btn); var _arr:Array = new Array(); _arr.push({id:1,name:"tanaka",age:33,btn:"1 詳細",address:"東京都目黒区"}); _arr.push({id:2,name:"sato",age:19,btn:"2 詳細",address:"東京都品川区"}); _arr.push({id:3,name:"otuska",age:23,btn:"3 詳細",address:"東京都江東区"}); _arr.push({id:4,name:"miura",age:28,btn:"4 詳細",address:"埼玉大宮"}); //配列をDataGridに突っ込む。 var _dp:DataProvider = new DataProvider(_arr); myDG.dataProvider = _dp; myDG.rowCount = myDG.length; //Btnの列にcellRendererを実行 _btn.cellRenderer = MyRenderer; //ボタンのクリックイベント設定 myDG.addEventListener(ListEvent.ITEM_CLICK, lsnDGClick); } private function lsnDGClick(e:ListEvent):void { trace("****************************************"); trace("列:" + e.columnIndex); trace("行:" + e.rowIndex); trace("index:" + e.index); trace("年齢を取り出す" + myDG.getItemAt(e.index).age); myTxt.text = myDG.getItemAt(e.index).name+"さんの年齢:"+myDG.getItemAt(e.index).age; } } }
今回の主役、ICellRendererクラス。ボタンにしたのでコンポーネントの「Button」を承継した。他にラジオボタンとかも入れられるから該当クラスを承継すればいい。ちなみに画像を入れたい場合はListを使えばいいかも。
package { import fl.controls.Button; import fl.controls.listClasses.ICellRenderer; import fl.controls.listClasses.ListData; public class MyRenderer extends Button implements ICellRenderer { private var _listData:ListData; private var _data:Object; public function MyRenderer( ) { } public function set listData(newListData:ListData):void { _listData = newListData; //ボタンのラベルを設定。直接Stringにしてもよい。 label = newListData.label; //ボタンのサイズをセット this.width = 80; this.height = 19; //座標は絶対座標になるので注意 this.x = 368; //絶対座標なので絶対数じゃなくて+=で対応 this.y += 1; } public function get listData():ListData { return _listData; } public function set data(newData:Object):void { _data = newData; } public function get data():Object { return _data; } } }
こちらのソースが大いに参考になった。感謝。
DataGrid上のチェックボックスやボタンが表示されない