[英]Flex3 Datagrid : custom rows on a flag
I am using an mx datagrid with three columns. 我正在使用具有三列的mx datagrid。 My dataprovider is a collection, itemList which has Item objects. 我的数据提供者是一个具有item对象的itemItem集合。 Item object has a flag field 'isValid'. 项目对象具有标志字段“ isValid”。 On meeting the condition 满足条件
item==null || item.isValid = false
I want the entire row to look like a single cell (merge the columns for the row) and display a label. 我希望整个行看起来像一个单元格(合并该行的列)并显示标签。 Here is my grid. 这是我的网格。
<mx:DataGrid id="grid" dataProvider="{itemList}">
<mx:columns>
<mx:ArrayList>
<mx:GridColumn dataField="Artist" headerText="Artist"/>
<mx:GridColumn dataField="Album" headerText="Album"/>
<mx:GridColumn dataField="Year" headerText="Year"/>
</mx:ArrayList>
</mx:columns>
</mx:DataGrid>
Any ideas how to do it? 有什么想法怎么做? Couldn't find much on SO. 在SO上找不到很多东西。 Thanks in advance. 提前致谢。
The only way you could mimic 3 column merge, would be with item renderers. 模仿3列合并的唯一方法是使用项目渲染器。
package
{
public class Item
{
public var Artist:String;
public var Album:String;
public var Year:String;
public var isValid:Boolean;
public function Item(artist:String, album:String, year:String, isValid:Boolean = true)
{
this.Artist = artist;
this.Album = album;
this.Year = year;
this.isValid = isValid;
}
}
}
For some reason your code didn't compile on actionscript3, I guess you have never version, but I believe this should work. 出于某种原因,您的代码未在actionscript3上编译,我想您从未发布过版本,但我认为这应该可行。
<mx:DataGrid id="grid" dataProvider="{itemList}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn id="artist" dataField="Artist" headerText="Artist"/>
<mx:DataGridColumn id="album" dataField="Album" headerText="Album"/>
<mx:DataGridColumn id="year" dataField="Year" headerText="Year"/>
</mx:columns>
</mx:DataGrid>
Album/Year renderer: 专辑/年份渲染器:
package
{
import mx.containers.HBox;
import mx.controls.Label;
import mx.controls.listClasses.IListItemRenderer;
public class AlbumYearItemRenderer extends HBox implements IListItemRenderer
{
public var dataField:String;
private var labelComponent:Label;
private var _itemChanged:Boolean;
private var _data:Item;
override public function set data(data:Object):void
{
super.data = data;
_data = data as Item;
_itemChanged = true;
}
protected override function createChildren():void
{
super.createChildren();
labelComponent = new Label();
removeAllChildren();
addChild(labelComponent);
}
protected override function commitProperties():void
{
super.commitProperties();
if(_itemChanged)
{
_itemChanged = false;
if((_data as Item).isValid)
{
labelComponent.text = _data[dataField];
}
}
}
}
}
Artist renderer: 艺术家渲染器:
package
{
import flash.display.BitmapData;
import flash.text.TextField;
import mx.containers.Canvas;
import mx.controls.Label;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
public class ArtistRenderer extends Canvas implements IListItemRenderer
{
private var c:UIComponent;
private var labelField:Label;
private var textField:TextField;
private var _itemChanged:Boolean;
private var _data:Item;
private var labelImage:BitmapData;
override public function set data(data:Object):void
{
super.data = data;
_data = data as Item;
_itemChanged = true;
}
protected override function createChildren():void
{
super.createChildren();
labelField = new Label();
textField = new TextField();
c = new UIComponent();
removeAllChildren();
}
protected override function commitProperties():void
{
super.commitProperties();
if(_itemChanged)
{
_itemChanged = false;
if(_data.isValid)
{
labelField.text = _data.Artist;
addChild(labelField);
}
else
{
textField.text = _data.Artist;
textField.width = 300;
labelImage = new BitmapData(textField.width, textField.height, true, 0x000000ff);
labelImage.draw(textField);
}
}
}
protected override function measure():void
{
super.measure();
if(!_data.isValid && labelImage != null)
{
graphics.beginBitmapFill(labelImage);
graphics.drawRect(0, 0, textField.width, textField.height);
graphics.endFill();
}
}
}
}
and the way I fill grid: 以及我填充网格的方式:
protected function init():void
{
var rend1:ClassFactory = new ClassFactory(ArtistRenderer);
artist.itemRenderer = rend1;
var rend2:ClassFactory = new ClassFactory(AlbumYearItemRenderer);
rend2.properties = {dataField: album.dataField};
album.itemRenderer = rend2;
var rend3:ClassFactory = new ClassFactory(AlbumYearItemRenderer);
rend3.properties = {dataField: year.dataField};
year.itemRenderer = rend3;
itemList.addItem(new Item("artist1", "album1", "year1"));
itemList.addItem(new Item("artist1", "album2", "year1"));
itemList.addItem(new Item("artist2......................INVALID!", "album1", "year1", false));
itemList.addItem(new Item("artist2", "album1", "year2"));
}
NOTE: Artist renderer uses "magical" number 300 to determine textField
's width, this should be passed/updated with actual DataGrid
's width to make it expand to full grid's width. 注意:Artist渲染器使用“魔术”数字300来确定textField
的宽度,应使用实际DataGrid
的宽度来传递/更新该值,以使其扩展到整个网格的宽度。 Also column borders are seen under an invalid item's artist textField. 在无效项目的艺术家textField下也可以看到列边框。 You should either disable borders or draw a maybe white square under textField
, but it's cosmetic job and I believe you will be able to dealt with this stuff. 您应该禁用边框或在textField
下绘制一个可能是白色的正方形,但这是textField
的工作,我相信您将能够处理这些问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.