Change the headers on a datagrid in flash with AS3.0. Change content in Datagrid cells for a Marquee

Hello there fellow scriptors,

I have been trying to customize the datagrid component. So far I have been able to customize the cells using a custom cellRenderer. I would like to change the way the header looks by using a custom headerRenderer as well but from all the ones that I have tried to make don't work.

This is my current headerRenderer code.

package { 
    import fl.controls.dataGridClasses.HeaderRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    import flash.text.TextField;
    import flash.display.Sprite;

    public class PlayListHeaderRenderer extends HeaderRenderer { 
        public function PlayListHeaderRenderer() { 
            var format:TextFormat = new TextFormat("Arial", 12);
            format.color = 0xffff00;
            format.bold = true;
            var upSkinBg:Sprite = new Sprite();
            upSkinBg.graphics.lineStyle(0.1,0x999999);
            upSkinBg.graphics.beginFill(0x666666);
            upSkinBg.graphics.drawRect(0,0,10,10);
            upSkinBg.graphics.endFill();
            var downSkinBg:Sprite = new Sprite();
            downSkinBg.graphics.lineStyle(0.1,0x999999);
            downSkinBg.graphics.beginFill(0x0000cc);
            downSkinBg.graphics.drawRect(0,0,10,10);
            downSkinBg.graphics.endFill();
            var overSkinBg:Sprite = new Sprite();
            overSkinBg.graphics.lineStyle(0.1,0x999999);
            overSkinBg.graphics.beginFill(0x0000ff);
            overSkinBg.graphics.drawRect(0,0,10,10);
            overSkinBg.graphics.endFill();
           开发者_如何学Go var selectedUpSkinBg:Sprite = new Sprite();
            selectedUpSkinBg.graphics.lineStyle(0.1,0x999999);
            selectedUpSkinBg.graphics.beginFill(0x0000cc);
            selectedUpSkinBg.graphics.drawRect(0,0,10,10);
            selectedUpSkinBg.graphics.endFill();
            var selectedDownSkinBg:Sprite = new Sprite();
            selectedDownSkinBg.graphics.lineStyle(0.1,0x999999);
            selectedDownSkinBg.graphics.beginFill(0x0000cc);
            selectedDownSkinBg.graphics.drawRect(0,0,10,10);
            selectedDownSkinBg.graphics.endFill();
            var selectedOverSkinBg:Sprite = new Sprite();
            selectedOverSkinBg.graphics.lineStyle(0.1,0x999999);
            selectedOverSkinBg.graphics.beginFill(0x0000ff);
            selectedOverSkinBg.graphics.drawRect(0,0,10,10);
            selectedOverSkinBg.graphics.endFill();
            setStyle("textFormat", format);
            setStyle("upSkin", upSkinBg);
            setStyle("downSkin", downSkinBg);
            setStyle("overSkin", overSkinBg);
            setStyle("selectedUpSkin", selectedUpSkinBg);
            setStyle("selectedDownSkin", selectedDownSkinBg);
            setStyle("selectedOverSkin", selectedOverSkinBg);
        } 
    }
}

Inside my actual program I do something like:

dgPL.setStyle("headerRenderer", PlayListHeaderRenderer);

to try and set the headerRenderer class that I created to the datagrid name dgPL. But it doesn't work. From what I have found on the internet the headerRenderer class is suppose to act just like the cellRenderer class in design and implementation. I can't find any examples of people using a custom headerRenderer class or examples on how to make one. So any help would be appreciated on letting me know where I have gone wrong in designing my class or implementing it into my program would be appreciated.

Also I am trying to figure out how to add a Marquee to the cells of the same datagrid so that if the content in the cell is too long for the size of the cell it will scroll across the cell when the user rolls over the datagids list of content. The part I am having trouble with is figuring out how to get the new string assigned to the cell without permanently overriding the dataprovider's content for that specific row in the datagrid.

From my looking on the internet I have found a way to create a marquee for textFields. What I can't figure out is how to apply it to the datagrid itself.

The code for the marquee is as follows:

var tf:TextField = new TextField();
tf.defaultTextFormat = dtf;
tf.text = dgPL.getItemAt(evt.rowIndex.toString()).Artist + "                    ";
tf.x = tf.y = 300;
addChild(tf);
var t:Timer = new Timer(200);
t.addEventListener(
    TimerEvent.TIMER,
    function(ev:TimerEvent): void
    {
        tf.text = tf.text.substr(1) + tf.text.charAt(0);
    }
);
t.start();

Right now the marquee works by creating a textField and doing the marquee that way but that isn't the most effective way of doing it at all due to allignment issues when scrolling the content in the datagrid.

I know how the Marquee works I just don't see how to apply this marquee to the datagrid cells itself. I know how to grab the content of my cell's with no issues at all and how to redefine it for the marquee to work I just am not sure how to assign it back to the cell itself without overriding the dataprovider permanently.

Any help on either of these topics would be greatly appreciated.

Sincerely, Tim

---

For your first problem. You need to use Class not instance as argument for setStyle. So you need to make 4 classes based on Sprite and pass them inside setStyle.

As for your text scroll problems I propose such small class:

    package  {
    import fl.controls.listClasses.CellRenderer;
    import flash.events.MouseEvent;
    import flash.events.Event;

    public class ScrolledDataGridCell extends CellRenderer{

        private var mOver:Boolean=false;
        private var active:Boolean=false;
        public function ScrolledDataGridCell() {
            addEventListener(MouseEvent.ROLL_OVER,over);
            addEventListener(MouseEvent.ROLL_OUT,out);

        }
        private function over(e:Event):void{
            mOver=true;
            if(!active&&textField.maxScrollH>0){
                active=true;
                addEventListener(Event.ENTER_FRAME,frame);
            }
        }
        private function out(e:Event):void{
            mOver=false
        }

        private function frame(e:Event):void{
            if(mOver){
                textField.scrollH++;
            }else{ 
                if(textField.scrollH>0){
                    textField.scrollH--;
                }else{
                    if(active){
                        active=false;
                        removeEventListener(Event.ENTER_FRAME,frame);
                    }
                }
            }
        }
    }
}