DataGrid单元格渲染自定义组件 [英] Datagrid Cell render with custom component
问题描述
几个小时前,我问过如何创建一个自定义组件(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的是一个有点臃肿,你要使用的组件定义或者简单的东西。我想你可以使用一个列表和<一起来破解的解决方案href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/SelectableList.html#style%3AcellRenderer"相对=nofollow>设置使用样式的自定义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.
心连心, 乔治
这篇关于DataGrid单元格渲染自定义组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!