Displaying a checkbox column in a Flex DataGrid -
i trying create custom flex datagrid consists of 2 columns, 1 label , other checkbox. checkbox contained within class called customrenderer inherits griditemrenderer , implements ifactory.
in each instance of customrenderer, have variable called number when checkbox clicked, can pass number know row has been clicked.
the problem customrenderer not show when program runs.
please help.
here code.
myprogram.mxml
<?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minwidth="955" minheight="600" initialize="initdata()"> <fx:script> <![cdata[ import mx.collections.arraycollection; import mx.controls.alert; import mx.controls.checkbox; import mx.rpc.events.abstractevent; private var arrayitems:array = [ {label:'table'}, {label:'chair'}, {label:'stool'}, {label:'bench'}, {label:'sofa'}]; [bindable] private var arraycollectionitems:arraycollection; private var t:customrenderer; public function initdata():void { arraycollectionitems=new arraycollection(arrayitems); t = new customrenderer(); t.cb.addeventlistener(mouseevent.click, handleclick); maingrid.columns[1].itemrenderer = t.newinstance(); } public function handleclick(event:event):void { var c:customrenderer = (event.currenttarget) customrenderer var rowclicked:int = c.number; } ]]> </fx:script> <s:states> <s:state name="state1"/> </s:states> <fx:declarations> <!-- place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:panel x="99" y="14" width="379" height="268" skinclass="spark.skins.spark.panelskin"> <s:datagrid id="maingrid" x="19" y="17" width="340" height="199" dataprovider="{arraycollectionitems}" requestedrowcount="4" requireselection="false" resizablecolumns="false" selectionmode="singlerow" showdatatips="false"> <s:columns> <s:arraylist> <s:gridcolumn minwidth="200" datafield="label" headertext="label"></s:gridcolumn> <s:gridcolumn minwidth="30" datafield="" headertext=""> </s:gridcolumn> </s:arraylist> </s:columns> <s:typicalitem> <fx:object datafield1="sample data" datafield2="sample data" datafield3="sample data"></fx:object> </s:typicalitem> </s:datagrid> </s:panel> </s:application>
customrenderer.as
import mx.controls.alert; import mx.controls.checkbox; import mx.core.ifactory; import spark.components.gridclasses.griditemrenderer; public class customrenderer extends griditemrenderer implements ifactory { private static var count:int = 0; public var number:int; public var cb:checkbox; public function customrenderer() { cb = new checkbox(); number = count++; cb.x = 22; cb.y = 4; addelement(cb); } public function newinstance():* { return new customrenderer(); } }
probably that's because pass instance of itemrenderer column (new customrenderer()) instead of class (customrenderer). common approach pass itemrenderer class column , handle clicks / selection inside of it:
<s:gridcolumn minwidth="30" headertext="" itemrenderer="com.yourpackage.customrenderer">
just start typing "customrenderer" when assign , should able autocomplete writes out full package path.
then catch checkbox select events inside of renderer , set custom data property (for example, data.selected). if need outside of grid after selection might need fire custom event renderer on selection , listen on datagrid.
Comments
Post a Comment