`
czwlucky
  • 浏览: 49905 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

从UIComponent继承实现ItemRenderer

    博客分类:
  • Flex
阅读更多

如果你的列表中要用到过多的ItemRender才能实现您要的效果,那最好不要直接从某容器实现,加载的速度那是相当另人不爽的。因此有必要自己手动来写一个从UIComponent继承而来的组件。参考的文档最好的应该是Adobe开发人员中心的文章了: 理解 Flex itemRenderer

这里写个大概流程代码,以供备忘

package renderer
{
	import mx.controls.AdvancedDataGrid;
	import mx.controls.dataGridClasses.DataGridListData;
	import mx.controls.listClasses.BaseListData;
	import mx.controls.listClasses.IDropInListItemRenderer;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.core.UIComponent;
	import mx.events.FlexEvent;

	public class ExampleItemRenderer extends UIComponent implements IListItemRenderer, IDropInListItemRenderer
	{
		public function ExampleItemRenderer()
		{
			super();
		}
		

		/*
		 * 创建子组件,并设置样式及可见性等
		 */
		override protected function createChildren():void
		{
			//trace("createChildren");
			super.createChildren();
			// 增加子组件
		}

		private var _data:Object;

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

		/*
		 * 在这个方法中调用invalidateProperties(),是为了在适当的时候调用commitProperties()
		 * 进行数据显示设置以及组件的可见性。
		 * 派发事件,并由get data()监听,是为了数据源的绑定。
		 */
		public function set data(value:Object):void
		{
			//trace("setData");
			_data=value;
			invalidateProperties();
			dispatchEvent(new FlexEvent("dataChange"));
		}

		/*
		 * 在这个方法中进行数据设置。当然,也可以在set data()中进行,不过可能会有不妥的时候吧
		 */
		override protected function commitProperties():void
		{
			//trace("commitProperties");
			super.commitProperties();
			// 获取列设置信息
			var field:String = (listData as DataGridListData).dataField;
			// lbl.text = data[field];
		}

		/*
		 * 在这个方法中对子元素进行定位和设置大小,默认大小为0×0
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			
			//trace("updateDisplayList");
			super.updateDisplayList(unscaledWidth, unscaledHeight);			
			
			//lbl.move(0, 0);
			//lbl.setActualSize(unscaledWidth, unscaledHeight);
		}

		/*
		 * 
		 */
		override protected function measure():void
		{
			//trace("measure");
			super.measure();
			// 如果AdvancedDataGrid的variableRowHeight="true"应该实现该方法,以提供合适的宽高
		}

		private var _listData:BaseListData;

		public function get listData():BaseListData
		{
			return _listData;
		}

		public function set listData(value:BaseListData):void
		{
			_listData=value;
		}

	}
}
分享到:
评论

相关推荐

    flex itemRenderer 渲染机制的概念和使用

    要创建一个itemRenderer,首先需要创建一个新的MXML或AS3类,该类继承自Flex的UIComponent或其他组件类,比如Canvas或Label。然后在类中定义并实现如何根据数据对象来构建和更新界面元素。 2. **注册itemRenderer*...

    flex datagrid中实现显示序列号

    `itemRenderer`是一个UIComponent子类的实例,它负责将数据对象转换为可视化的组件。当DataGrid渲染数据项时,它会为每个数据项创建一个`itemRenderer`实例,并将其数据属性设置为数据项。这样,我们就可以在`...

    ItemRanderer Examples

    2. **创建自定义`ItemRenderer`**:开发者可以创建自己的`ItemRenderer`类,继承自`MXItemRenderer`或`spark.components.supportClasses.ItemRenderer`(对于Flex 4及更高版本)。这通常涉及覆盖`createChildren`和`...

    Flex动态创建DataGrid设置图片

    首先,我们需要创建一个自定义的ItemRenderer类,该类继承自`mx.controls.listClasses.ListItemRenderer`或`spark.components.supportClasses.ListItemRenderer`(根据你使用的Flex SDK版本)。在ItemRenderer中,...

    Flex中Datagrid应用(每行修改删除按钮)

    我们可以通过继承MX的ListBase类或者UIComponent类来创建自定义的ItemRenderer。 **3. 自定义ItemRenderer** 创建自定义ItemRenderer时,首先需要在.mxml文件中定义组件结构,包括按钮。然后在ActionScript代码中...

    Flex DataGrid 改变某一行的背景颜色

    除了自定义ItemRenderer,我们还可以通过CSS来实现。在Flex中,可以为DataGrid定义一个CSS类,然后在需要改变背景色的行上应用这个类。例如: ```css .myCustomRow { background-color: #FF0000; } ``` 然后在...

    flex tree checkbox

    ItemRenderer是Flex提供的一种机制,允许开发者为UIComponent的每个项提供自定义的显示方式。对于TreeChk项目,我们可能需要创建一个新的MXML或ActionScript类,继承自mx.controls.treeClasses.TreeItemRenderer,并...

    DataGrid和AdvancedDataGrid CheckBox全选功能1.1

    DataGrid是Flex中最基础的数据展示组件,它可以显示二维表格数据,每个单元格可以是文本、图像或其他UIComponent。AdvancedDataGrid则是DataGrid的增强版,提供了更丰富的数据显示和排序、分组等功能,适合处理大量...

    Flex面试题及答案

    要创建一个继承自UIComponent的正方形组件,关键步骤包括: 1. 初始化组件属性,如边长,确保可通过MXML设置。 2. 覆盖`createChildren()`方法添加子元素。 3. 覆盖`commitProperties()`方法响应属性变化。 4. 覆盖...

    Flex试题 .txt

    UIComponent是Flex中的基础类,所有自定义组件都继承自它。创建UIComponent涉及定义其外观和行为,这可以通过MXML和ActionScript完成。特点包括:可重用性、可定制性和事件处理能力。 ### 10. TabNavigator的...

    AS3写Flex皮肤问题代码

    在AS3中创建Flex皮肤,我们需要继承`flash.display.MovieClip`或`mx.core.UIComponent`类。对于List组件,我们可以创建一个新的类,扩展`mx.controls.ListBase`,并覆盖其`createChildren`、`measure`和`...

Global site tag (gtag.js) - Google Analytics