Setting styles dynamically

Question

Can I set a style dynamically? In the component below, I want
to change the button style (in the onChange event handler)
according to the selected state of the button, but the style is
ignored and replaced with a default version of a button. If not, is
there a work around that you would recommend or do I need to
restructure my code?

Answer 1

"SiHoop" <[email protected]> wrote in
message
news:[email protected]...
> Can I set a style dynamically? In the component below, I
want to change
> the
> button style (in the onChange event handler) according
to the selected
> state of
> the button, but the style is ignored and replaced with a
default version
> of a
> button. If not, is there a work around that you would
recommend or do I
> need to
> restructure my code?
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
>
implements="mx.controls.listClasses.IDropInListItemRenderer">
> <mx:Script>
> <![CDATA[
> import mx.controls.listClasses.BaseListData;
> import mx.controls.Button;
> import MyDataGrid_sh
> private var _listData:BaseListData;
> [Bindable]public var key:String;
> [Bindable]public var linkButton:String="linkButton";
>
> private var myDataGrid:MyDataGrid_sh;
>
> public function get listData():BaseListData {
> return _listData;
> }
> public function set listData( value:BaseListData ):void
> _listData = value;
> myDataGrid = _listData.owner as MyDataGrid_sh;
> key=_listData.uid;
> }
> private function onChange(event:Event):void{
> parentDocument.hideMapMarker()
> var i:int=myDataGrid.toggledButtons.getItemIndex(key);
> //Select button
> if(i==-1 && (event.target as
Button).selected==true){
> myDataGrid.toggledButtons.addItem(key)
> dg_Button.styleName="linkButton1"
>
> }
> //Release back to original state
> if(i>=0 ){
> myDataGrid.toggledButtons.removeItemAt(i);
> dg_Button.styleName="linkButton"
> }
> myDataGrid.invalidateList();
> }
> override protected function
updateDisplayList(unscaledWidth:Number,
> unscaledHeight:Number):void{
> super.updateDisplayList(unscaledWidth, unscaledHeight);
> if(key){
> var i:int=myDataGrid.toggledButtons.getItemIndex(key);
> if(i>=0){
> dg_Button.selected=true;
> }
> else{
> dg_Button.selected=false;
> }
> }
> }
> ]]>
> </mx:Script>
> <mx:Button styleName="{linkButton}" id="dg_Button"
width="50"
> toggle="true" click="onChange(event)"/>
> </mx:VBox>
I think the problem may be that you're binding the styleName
property, so it
might be setting it right back even if it gets set properly.
try <mx:Button styleName="linkButton" id="dg_Button"
width="50" ...
Unless you need what VBox gives you, you may want to consider
using a
lighter base component. At least go to Canvas, if you're not
comfortable
with UIComponent. If you want to try your hand at
UIComponent, there's a
simple example of one fully commented as part of my DataGrid
with
styleFunction example
http://flexdiary.blogspot.com/2008/09/extended-datagrid-with-stylefunction.html
HTH;
Amy