datagrid 水平滚动条问题

时间:2022-01-15 17:12:03
有遇到一个类似的问题,也是我自己写的一个ItemRender类, 
但是当拖动Grid的横向滚动条的时候,
各行之间的数据就会错乱, 或者一行中的某个数据就不显示,
各位GGJJ帮忙出出主意吧, 
谢谢了~~

19 个解决方案

#1


自己顶下,各位大侠帮帮忙吧,
感激不尽~~
(*_*)!!

#2


DataGrid是有很多BUG的,写RENDERER好像有些情况拖动滚动条是会出现数据错乱,你先试下换成一个最简单的RENDERER会不会错乱,自己可以先测试下,找原因

#3


我自己写了一个很简单的,做了一个例子,数据也是假数据,
那样子不会有问题,
但是放到我的画面上就不行,郁闷死了,

#4


把那个最简单的RENDERER放到你的页面上就不行了?把RENDERER帖出来看看

#5


package{
import mx.controls.Image;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.core.UITextField;
import mx.events.FlexEvent;

public class GroupRendererAs extends UIComponent implements IListItemRenderer {

[Bindable]
public var selectVsIndex:int = 0;

public var isQuality:Boolean = false;
public var isCost:Boolean = false;
public var stepCd:String = "";
public var left_label:String;
public var mid_label:String;
public var right_label:String;
public var left_icon_cd:String;
public var mid_icon_cd:String;
public var right_icon_cd:String;

private var path1:String = "";
private var path2:String = "";
private var path3:String = "";
private var selectCss:uint = 0;
private var selectCss1:uint = 0;
private var selectCss2:uint = 0;
private var selectCss3:uint = 0;
private var _data:Object = {};
private var txtL:UITextField;
private var txtM:UITextField;
private var txtR:UITextField;
private var imgL:Image;
private var imgM:Image;
private var imgR:Image;
public function GroupRendererAs()
{
super();
}

override protected function createChildren() : void {                
     super.createChildren();
     
   /*  doubleClickEnabled = true;
height = 21;
setStyle("color", 0xffffff);
setStyle("fontSize", 13);  */

txtL = new UITextField();
txtL.background = true;
txtL.doubleClickEnabled = true;
//txtL.addEventListener(MouseEvent.DOUBLE_CLICK, popUpView809);
addChild(txtL);

imgL = new Image();
imgL.scaleContent = false;
addChild(imgL);


txtM = new UITextField();
txtM.background = true;
txtM.doubleClickEnabled = true;
//txtM.addEventListener(MouseEvent.DOUBLE_CLICK, popUpView809);
addChild(txtM);

imgM = new Image();
imgM.scaleContent = false;
addChild(imgM);

txtR = new UITextField();
txtR.background = true;
txtR.doubleClickEnabled = true;
//txtR.addEventListener(MouseEvent.DOUBLE_CLICK, popUpView809);
addChild(txtR);

imgR = new Image();
imgR.scaleContent = false;
addChild(imgR);
}

override protected function commitProperties():void{                
super.commitProperties();

//init();

if (selectVsIndex != 1 && selectVsIndex != 2 && selectVsIndex != 5) {

txtL.text = data[left_label];
//txtL.backgroundColor = selectCss1;

//imgL.source = path1;
}
/* else{
txtL.visible = false;
txtL.includeInLayout = false;
imgL.visible = false;
imgL.includeInLayout = false;
} */

if (selectVsIndex != 0 && selectVsIndex != 2 && selectVsIndex != 4) {

txtM.text = data[mid_label];
//txtM.backgroundColor = selectCss2;

//imgM.source = path2;
}
/* else{

txtM.visible = false;
txtM.includeInLayout = false;
imgM.visible = false;
imgM.includeInLayout = false;
} */
if (selectVsIndex != 0 && selectVsIndex != 1 && selectVsIndex != 3) {
 
txtR.text = data[right_label];
//txtR.backgroundColor = selectCss3;

//imgR.source = path3;
}
/* else{
txtR.visible = false;
txtR.includeInLayout = false;
imgR.visible= false;
imgR.includeInLayout = false;
}  */

}
[Bindable("dataChange")]
public function get data():Object {
return _data;
}

public function set data(item:Object):void {

    _data = item;
invalidateProperties();
    dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
private var minW:Number = 0;
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);

 var base:Number = 0;
if (selectVsIndex >= 0 && selectVsIndex <= 2) {
base = 1;
} else if (selectVsIndex >= 3 && selectVsIndex <= 5) {
base = 2;
} else if (selectVsIndex == 6) {
base = 3;
}

if (base == 0) {
return;
}

var count:Number = base * 2;
var w:Number = 0;

if (txtL != null && txtL.visible) {
txtL.width = unscaledWidth / count - 2;
txtL.height = 21;
txtL.x = 2;


imgL.width = txtL.width;
imgL.x = (txtL.width - 16) / 2 + txtL.width;
imgL.y = 3;
imgL.height = 21;

w = unscaledWidth / base;
}
if (txtM != null && txtM.visible) {
txtM.width = unscaledWidth / count - 2;
txtM.height = 21;
txtM.x = w + 1;

imgM.width = txtM.width;
imgM.x = w + (txtM.width - 16) / 2 + txtM.width;
imgM.y = 3;
imgM.height = 21;

w += unscaledWidth / base;
}
if (txtR != null && txtR.visible) {
txtR.width = unscaledWidth / count - 2;
txtR.height = 21;
txtR.x = w + 1;

imgR.width = txtR.width;
imgR.x = w + (txtR.width - 16) / 2 + txtR.width;
imgR.y = 3;
imgR.height = 21;

/* var n:Number;
this.graphics.clear();
if (selectVsIndex >= 0 && selectVsIndex <= 2) {
} else if (selectVsIndex >= 3 && selectVsIndex <= 5) {
n = unscaledWidth / 2 - 1;
if (n - Math.floor(n) > 0.5) {
n = Math.ceil(n);
}
graphics.lineStyle(1, 0xb7babc, 1.0);
graphics.moveTo(n, 0);
graphics.lineTo(n, 21);
} else if (selectVsIndex == 6) {
n = unscaledWidth / 3 - 1;
if (n - Math.floor(n) >= 0.5) {
n = Math.ceil(n);
}
graphics.lineStyle(1, 0xb7babc, 1.0);
graphics.moveTo(n, 0);
graphics.lineTo(n , 21);

graphics.moveTo(n * 2, 0);
graphics.lineTo(n * 2, 21);
} */
}


}
}

#6


学习

#7


herowach老大,看了render,有什么结果吗,
有办法能解决吗?

#8


还有一个问题,请问为什么DataGrid的最后一列的列宽会被拉长呢,
跟设定的值不一样~~

#9


你这RENDERER好麻烦,懒得看,呵呵,DataGrid最后一列的列宽会被拉长可能因为你所有列的宽度之和小于DataGrid的Width,这样最后一列可能会占满剩余的宽度

#10


RENDERER那个我已经解决了,就是调整了一下顺序,
但是最后一列的宽的问题还是有,
我的DataGrid的Width设定了一个数字,
初期化的时候,生成的各列的宽度加起来比DataGrid的Width要大的多,
但是最后那列的宽度还是重新分配了,
会有其他的问题导致这种现象吗?

#11


herowach,没有办法解决我的这个问题吗?

#12


引用 11 楼 zhaojuzi 的回复:
herowach,没有办法解决我的这个问题吗? 


楼主先用简单的来写一个吧,一步一步来

#13


render中的数据错乱的问题解决了,
但是最后一列的列宽问题,改怎么办啊。。。。

#14


我只遇到我说的那种情况,你的这种情况会不会是因为你column实际的宽度跟你指定的宽度不一致?你可以等DataGrid初始化完后取出column的宽度看看,或者把每列都设一个比较大的值或不指定宽度,看还会不会出现最后一列变宽的情况

#15


我自己做的例子,DataGrid中的列都是固定的,
倒是可以通过调整宽的,达到效果,最后一列不会被拉宽
但是实际我的DataGrid中的列是不固定的,
列数是动态的,
这样的话,调整宽度也达不到目的,郁闷!!!

#16


我在列的属性上加上了resable = false, 最后一类的宽度是可以固定显示我指定的宽度,
但是却在后面有一段的空白,
这个会是什么引起的呢?

#17


我在另外一个网站上问了这个问题,
有人说让我到他的博客上去看,
但是没看明白,哪位能帮我看看啊,是什么意思啊?
blog :http://www.flexers.cn

#18


我也有那个,是FLEX4,dateGrid 点下一页,最后一列会自动变的越来越长,前面的列数据越来越挤,请问楼主那个问题是怎么解决的?

#19


备注下:我没有设置列宽:
<mx:DataGrid height="420" top="10" left="37" right="37" id="myList"  textAlign="center" paddingTop="8">

#1


自己顶下,各位大侠帮帮忙吧,
感激不尽~~
(*_*)!!

#2


DataGrid是有很多BUG的,写RENDERER好像有些情况拖动滚动条是会出现数据错乱,你先试下换成一个最简单的RENDERER会不会错乱,自己可以先测试下,找原因

#3


我自己写了一个很简单的,做了一个例子,数据也是假数据,
那样子不会有问题,
但是放到我的画面上就不行,郁闷死了,

#4


把那个最简单的RENDERER放到你的页面上就不行了?把RENDERER帖出来看看

#5


package{
import mx.controls.Image;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.core.UITextField;
import mx.events.FlexEvent;

public class GroupRendererAs extends UIComponent implements IListItemRenderer {

[Bindable]
public var selectVsIndex:int = 0;

public var isQuality:Boolean = false;
public var isCost:Boolean = false;
public var stepCd:String = "";
public var left_label:String;
public var mid_label:String;
public var right_label:String;
public var left_icon_cd:String;
public var mid_icon_cd:String;
public var right_icon_cd:String;

private var path1:String = "";
private var path2:String = "";
private var path3:String = "";
private var selectCss:uint = 0;
private var selectCss1:uint = 0;
private var selectCss2:uint = 0;
private var selectCss3:uint = 0;
private var _data:Object = {};
private var txtL:UITextField;
private var txtM:UITextField;
private var txtR:UITextField;
private var imgL:Image;
private var imgM:Image;
private var imgR:Image;
public function GroupRendererAs()
{
super();
}

override protected function createChildren() : void {                
     super.createChildren();
     
   /*  doubleClickEnabled = true;
height = 21;
setStyle("color", 0xffffff);
setStyle("fontSize", 13);  */

txtL = new UITextField();
txtL.background = true;
txtL.doubleClickEnabled = true;
//txtL.addEventListener(MouseEvent.DOUBLE_CLICK, popUpView809);
addChild(txtL);

imgL = new Image();
imgL.scaleContent = false;
addChild(imgL);


txtM = new UITextField();
txtM.background = true;
txtM.doubleClickEnabled = true;
//txtM.addEventListener(MouseEvent.DOUBLE_CLICK, popUpView809);
addChild(txtM);

imgM = new Image();
imgM.scaleContent = false;
addChild(imgM);

txtR = new UITextField();
txtR.background = true;
txtR.doubleClickEnabled = true;
//txtR.addEventListener(MouseEvent.DOUBLE_CLICK, popUpView809);
addChild(txtR);

imgR = new Image();
imgR.scaleContent = false;
addChild(imgR);
}

override protected function commitProperties():void{                
super.commitProperties();

//init();

if (selectVsIndex != 1 && selectVsIndex != 2 && selectVsIndex != 5) {

txtL.text = data[left_label];
//txtL.backgroundColor = selectCss1;

//imgL.source = path1;
}
/* else{
txtL.visible = false;
txtL.includeInLayout = false;
imgL.visible = false;
imgL.includeInLayout = false;
} */

if (selectVsIndex != 0 && selectVsIndex != 2 && selectVsIndex != 4) {

txtM.text = data[mid_label];
//txtM.backgroundColor = selectCss2;

//imgM.source = path2;
}
/* else{

txtM.visible = false;
txtM.includeInLayout = false;
imgM.visible = false;
imgM.includeInLayout = false;
} */
if (selectVsIndex != 0 && selectVsIndex != 1 && selectVsIndex != 3) {
 
txtR.text = data[right_label];
//txtR.backgroundColor = selectCss3;

//imgR.source = path3;
}
/* else{
txtR.visible = false;
txtR.includeInLayout = false;
imgR.visible= false;
imgR.includeInLayout = false;
}  */

}
[Bindable("dataChange")]
public function get data():Object {
return _data;
}

public function set data(item:Object):void {

    _data = item;
invalidateProperties();
    dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
private var minW:Number = 0;
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);

 var base:Number = 0;
if (selectVsIndex >= 0 && selectVsIndex <= 2) {
base = 1;
} else if (selectVsIndex >= 3 && selectVsIndex <= 5) {
base = 2;
} else if (selectVsIndex == 6) {
base = 3;
}

if (base == 0) {
return;
}

var count:Number = base * 2;
var w:Number = 0;

if (txtL != null && txtL.visible) {
txtL.width = unscaledWidth / count - 2;
txtL.height = 21;
txtL.x = 2;


imgL.width = txtL.width;
imgL.x = (txtL.width - 16) / 2 + txtL.width;
imgL.y = 3;
imgL.height = 21;

w = unscaledWidth / base;
}
if (txtM != null && txtM.visible) {
txtM.width = unscaledWidth / count - 2;
txtM.height = 21;
txtM.x = w + 1;

imgM.width = txtM.width;
imgM.x = w + (txtM.width - 16) / 2 + txtM.width;
imgM.y = 3;
imgM.height = 21;

w += unscaledWidth / base;
}
if (txtR != null && txtR.visible) {
txtR.width = unscaledWidth / count - 2;
txtR.height = 21;
txtR.x = w + 1;

imgR.width = txtR.width;
imgR.x = w + (txtR.width - 16) / 2 + txtR.width;
imgR.y = 3;
imgR.height = 21;

/* var n:Number;
this.graphics.clear();
if (selectVsIndex >= 0 && selectVsIndex <= 2) {
} else if (selectVsIndex >= 3 && selectVsIndex <= 5) {
n = unscaledWidth / 2 - 1;
if (n - Math.floor(n) > 0.5) {
n = Math.ceil(n);
}
graphics.lineStyle(1, 0xb7babc, 1.0);
graphics.moveTo(n, 0);
graphics.lineTo(n, 21);
} else if (selectVsIndex == 6) {
n = unscaledWidth / 3 - 1;
if (n - Math.floor(n) >= 0.5) {
n = Math.ceil(n);
}
graphics.lineStyle(1, 0xb7babc, 1.0);
graphics.moveTo(n, 0);
graphics.lineTo(n , 21);

graphics.moveTo(n * 2, 0);
graphics.lineTo(n * 2, 21);
} */
}


}
}

#6


学习

#7


herowach老大,看了render,有什么结果吗,
有办法能解决吗?

#8


还有一个问题,请问为什么DataGrid的最后一列的列宽会被拉长呢,
跟设定的值不一样~~

#9


你这RENDERER好麻烦,懒得看,呵呵,DataGrid最后一列的列宽会被拉长可能因为你所有列的宽度之和小于DataGrid的Width,这样最后一列可能会占满剩余的宽度

#10


RENDERER那个我已经解决了,就是调整了一下顺序,
但是最后一列的宽的问题还是有,
我的DataGrid的Width设定了一个数字,
初期化的时候,生成的各列的宽度加起来比DataGrid的Width要大的多,
但是最后那列的宽度还是重新分配了,
会有其他的问题导致这种现象吗?

#11


herowach,没有办法解决我的这个问题吗?

#12


引用 11 楼 zhaojuzi 的回复:
herowach,没有办法解决我的这个问题吗? 


楼主先用简单的来写一个吧,一步一步来

#13


render中的数据错乱的问题解决了,
但是最后一列的列宽问题,改怎么办啊。。。。

#14


我只遇到我说的那种情况,你的这种情况会不会是因为你column实际的宽度跟你指定的宽度不一致?你可以等DataGrid初始化完后取出column的宽度看看,或者把每列都设一个比较大的值或不指定宽度,看还会不会出现最后一列变宽的情况

#15


我自己做的例子,DataGrid中的列都是固定的,
倒是可以通过调整宽的,达到效果,最后一列不会被拉宽
但是实际我的DataGrid中的列是不固定的,
列数是动态的,
这样的话,调整宽度也达不到目的,郁闷!!!

#16


我在列的属性上加上了resable = false, 最后一类的宽度是可以固定显示我指定的宽度,
但是却在后面有一段的空白,
这个会是什么引起的呢?

#17


我在另外一个网站上问了这个问题,
有人说让我到他的博客上去看,
但是没看明白,哪位能帮我看看啊,是什么意思啊?
blog :http://www.flexers.cn

#18


我也有那个,是FLEX4,dateGrid 点下一页,最后一列会自动变的越来越长,前面的列数据越来越挤,请问楼主那个问题是怎么解决的?

#19


备注下:我没有设置列宽:
<mx:DataGrid height="420" top="10" left="37" right="37" id="myList"  textAlign="center" paddingTop="8">

#20