DataGrid单元格渲染自定义组件

本文介绍了DataGrid单元格渲染自定义组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

几个小时前，我问过如何创建一个自定义组件（TextInput和标签组成部分，创造了一个组件定义），并与你的答案，我可以做到这一点了。

A few hours ago I've asked how to create a custom component (textInput and label component and created a Component Definition) and with your answers I can do that now.

问题2：我想使用该组件在一个DataGrid列，使用户可以输入在TextInput的值，这将反过来更新基础数据提供器。 我知道我应该使用的CellRenderer像我有一个复选框列（也有在网上帮助）完成，但在这个阶段，我只能拉我的头发。 请大家帮帮忙。

Problem 2: I'd like to use that component in a datagrid column so that the user can type a value in the textInput which will in turn update the underlying dataprovider. I know I should use a cellrenderer like I've done with a checkbox column (also with help on the Net), but at this stage I'm only pulling my hair out. Please help.

推荐答案

这可能会显得凌乱，因为它是一个改进的例子。

This might look messy as it's a modified example.

请确保您在FLA的库中的DataGrid，标签和TextInput组件要试试这个：

Make sure you have the DataGrid, Label and TextInput components in the library of the fla you want to try this:

// Import the required component classes. import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridColumn; import fl.data.DataProvider; //get some data ready, notice data and label var dp:DataProvider = new DataProvider(); for(var i:int = 0 ; i < 7; i++) dp.addItem({data:'input '+(i+1),label:'label '+(i+1), title:"item " + (i+1)}); var dataCol:DataGridColumn = new DataGridColumn("data"); dataCol.cellRenderer = CustomCell; var titleCol:DataGridColumn = new DataGridColumn("title"); var myDataGrid:DataGrid = new DataGrid(); myDataGrid.addColumn(dataCol); myDataGrid.addColumn(titleCol); myDataGrid.dataProvider = dp; myDataGrid.rowHeight = 64; myDataGrid.width = 500; myDataGrid.rowCount = dp.length - 1; myDataGrid.move(10, 10); myDataGrid.editable = true; addChild(myDataGrid);

而CustomCell类看起来是这样的：

And the CustomCell class looks like this:

package { // Import the required component classes. import fl.controls.listClasses.ICellRenderer; import fl.controls.listClasses.ListData; import fl.controls.Label; import fl.controls.TextInput; import fl.core.InvalidationType; import fl.core.UIComponent; import fl.data.DataProvider; import flash.display.Sprite; import flash.events.Event; public class CustomCell extends UIComponent implements ICellRenderer { protected var _data:Object; protected var _listData:ListData; protected var _selected:Boolean; //the custom components private var labelComponent:Label; private var inputComponent:TextInput; /** * Constructor. */ public function CustomCell():void { super(); init(); } /** * Draws the Label and TextInput components */ private function init():void{ labelComponent = new Label(); labelComponent.autoSize = 'right'; inputComponent = new TextInput(); inputComponent.editable = true; addChild(labelComponent); addChild(inputComponent); inputComponent.x = labelComponent.width + 5;//5 pixels distance between components inputComponent.drawFocus(true); } public function get data():Object { return _data; } /** * @private (setter) */ public function set data(value:Object):void { _data = value; //there's label data, update the label if(_data.label) labelComponent.text = _data.label; //there's data for the input, update that too if(_data.data) inputComponent.text = _data.data; } public function get listData():ListData { return _listData; } public function set listData(value:ListData):void { _listData = value; invalidate(InvalidationType.DATA); invalidate(InvalidationType.STATE); } public function get selected():Boolean { return _selected; } public function set selected(value:Boolean):void { _selected = value; invalidate(InvalidationType.STATE); } public function setMouseState(state:String):void { } } }

在code主要来自这DEVNET 文章。

它的工作原理确定，如，它的编辑。

It works ok, as in, it's editable.

解是可以是组件类（一类延伸fl.core.UIComponent），实现ICellRender接口，因此它可以被设置为呈现器，以及含有该标签和TextInput组件。还数据将被映射到TextInput.text，所以它可以很容易地进行编辑。

Solution is be a component class(a class extending fl.core.UIComponent), implementing the ICellRender interface so it can be set as a renderer, and containing the Label and TextInput components. Also data will be mapped to TextInput.text, so it can be easily edited.

如果DataGrid的是一个有点臃肿，你要使用的组件定义或者简单的东西。我想你可以使用一个列表和设置使用样式的自定义CellRenderer。 我猜定制剪辑用作 TweenLite的页面上的插件列表中的单元格渲染器。

If DataGrid is a bit bloated, and you want to use the Component Definition or something simpler. I guess you can hack together a solution using a List and setting a custom cellRenderer using styles. I'm guessing custom clips are used as a cell renderer in the Plugins list on the tweenlite page.

心连心， 乔治