通过ItemRenderer给DataGrid的Cell设置背景色后，在行高变化时或有滚动条时，背景色表示不正常

根据需要，各列的值不同时，行的背景色要设置为黄色，这点我通过重写drawRowBackground()实现了。
另外，行中，发生变化的cell的背景色要设置为橙色，这点我是通过ItemRenderer（canvas + label）来实现的。不过，当名称列的表示内容因换行导致行高变大时，ItemRenderer的canvas的位置会向下偏移，没有跟cell重合。
而且，数据过多，有滚动条时（画面初期表示，没有拖动滚动条），ItemRenderer会被执行两次，导致没有变化的行也被按照上面发生变化的行的Cell进行了背景色设置。

请高手帮忙分析，提高解决方法，在线等，谢谢！！！

现象图片：
图片一直传不上来

ItemRenderer代码：

    import mx.containers.Canvas;
    import mx.controls.Label;
    
    public class HistoryRenderer extends Canvas
    {
        /**
         * data(override)
         */
        private var _data:XML;
        
        private var _field:String;
        
        /**
         * data Setter
         */
        override public function set data(value:Object):void
        {
            _data = XML(value[field]);
            
            init();
        }
        
        /**
         * data Getter
         */
        override public function get data():Object
        {
            return _data;
        }
        
        /**
         * field Setter
         */
        public function set field(value:String):void
        {
            _field = value;
        }
        
        /**
         * field Getter
         */
        public function get field():String
        {
            return _field;
        }
        
        private function init():void {
			this.removeAllChildren();
            
            var label:Label = new Label();
            label.percentWidth = 100;
            label.percentHeight = 100;
            label.text = data.toString();
            label.setStyle("textAlign", "center");
            this.addChild(label);
            if (XML(data).@change == "1") {
                this.setStyle("backgroundColor", 0xFFA500)
            }
        }
        
        override protected function commitProperties():void
        {
            super.commitProperties();
            this.percentWidth = 100;
            this.percentHeight = 100;
            this.setStyle("horizontalScrollPolicy", "off");
            this.setStyle("verticalScrollPolicy", "off");
        }
    }

4 个解决方案

#1

下面是现象图片

#2

you can try do it like this
1.set the property of the grid 'verticalAlign' ->"middle"
2.      
  override public function set data(value:Object):void
        {
if(_data != XML(value[field]))
{
            _data = XML(value[field]);
             
            init();
}

        }
         

#3

1.set the property of the grid 'verticalAlign' ->"middle"
这个方法现在已经在用了，没有效果

方法2我试了下，没有效果。

另外，我按照下面的方法改了下ItemRenderer，能过解决问题1，但是解决不了问题2.

不用canvas，只用label。

    import common.CommonDefine;
    
    import mx.controls.Label;
    
    public class HistoryRenderer extends Label
    {
        /**
         * data(override)
         */
        private var _data:XML;
        
        private var _field:String;
        
        /**
         * data Setter
         */
        override public function set data(value:Object):void
        {
            _data = XML(value[field]);
        
            init();
        }
        
        /**
         * data Getter
         */
        override public function get data():Object
        {
            return _data;
        }
        
        /**
         * field Setter
         */
        public function set field(value:String):void
        {
            _field = value;
        }
        
        /**
         * field Getter
         */
        public function get field():String
        {
            return _field;
        }
        
        private function init():void {
            this.text = data.toString();
            this.setStyle("textAlign", "center");
			textField.alpha = 1;
			textField.background = false;
			textField.border = false;
            if (XML(data).@change == "1") {
				textField.background = true;
				textField.backgroundColor = 0xFFA500;
            }
        }
        
        override protected function commitProperties():void
        {
            super.commitProperties();
            this.percentWidth = 100;
            this.percentHeight = 100;
            this.setStyle("horizontalScrollPolicy", "off");
            this.setStyle("verticalScrollPolicy", "off");
        }
    }

textField.border = true;的时候，通过label的边框位置可以看出来，label不是在单元格的左上角开始的。

#4

去掉DataGrid的this.setStyle("verticalAlign", "middle");设定后，问题2就不再发生了。个人推测，应该是由于Label没有垂直居中属性，DataGrid为了实现文字的垂直居中，内部设置了Label的paddingTop,从而使得文字显示具有了垂直居中效果。不过，一设置背景色，就出现了问题2的偏移现象。
现在解决了问题2， 又出现了文字垂直居中表示的问题，尝试了重写Label的updateDisplayList方法，不过这种方法就是通过textField的坐标设置实现的，我现在是通过textField设置的背景色，所以如果实现了文字垂直居中，肯定就会出现背景色偏移的问题，头疼啊～～～～～～～～～

高手帮忙给支支招哈～～～拜谢！！！