Flex DataGrid 可编辑
传统应用中有这个一个很好的效果,即一个Grid的一个单元格内嵌入一个文本框后面再跟个按钮,做一些操作,很机动,很灵活。
Flex当然不会直接给提供这样的组件,只能自己写一个,具体实现如下:
?
1、写一个Grid。
?
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();"><mx:Script source="sss.as"/><mx:DataGrid id="testGrid" editable="true"><mx:dataProvider> <mx:Object code="PC-001" amount="11"/> <mx:Object code="PC-002" amount="1"/> </mx:dataProvider><mx:columns><mx:DataGridColumn headerText="编号" dataField="code" headerStyleName="centered" itemEditor="common.CellTextButton.CellTextButton" editable="true" width="120" resizable="false" textAlign="left"/><mx:DataGridColumn headerText="数量" dataField="amount" headerStyleName="centered" editable="true" textAlign="left"/></mx:columns></mx:DataGrid></mx:Application>
?? ?要注意的问题如下:
?? ?(1)、editable="true"
?? ?(2)、itemEditor="common.CellTextButton.CellTextButton" 双括号里面的内容就是一个自己写的组件组件,
?? ? ? ? ? 下面介绍这个组件。
?
2、写一个包含Text和Button的组件。
?
<?xml version="1.0" encoding="utf-8"?><mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"><mx:Script><![CDATA[[Bindable][Embed(source='image/common/fangdajing.jpg')]private var fangdajing:Class;// 这个素材在文章下面提供了链接,要自己下下来。private var _text:String = "";public function get text():String {return this._text;}public function set text(str:String):void {this._text = str;}]]></mx:Script><mx:Text id="txt" width="100%"/><mx:Button id="btn" icon="{fangdajing}" width="23"/></mx:HBox>
??? ?要注意的问题如下:
?? ?(1)、里面有个text属性,切忌这个属性不能删除,因为Flex的DataGrid会自己判断,默认就从这个属性中读值,
如果去掉或改名会出问题(好像是改成label也可以,没试过,大家可以试一下)。
?
?
3、在AS中调用。
// ActionScript fileimport common.CellTextButton.CellTextButton;import flash.events.MouseEvent;import mx.controls.Alert;import mx.controls.DataGrid;import mx.controls.TextInput;import mx.events.DataGridEvent;public function init():void {testGrid.addEventListener(DataGridEvent.ITEM_FOCUS_IN, editGrid);testGrid.addEventListener(DataGridEvent.ITEM_FOCUS_OUT, editOver);}public function editGrid(event:DataGridEvent):void {if (event.columnIndex == 0) {CellTextButton(DataGrid(event.target).itemEditorInstance).txt.text = testGrid.selectedItem.code;CellTextButton(DataGrid(event.target).itemEditorInstance).btn.addEventListener(MouseEvent.CLICK, btnClick);} else if (event.columnIndex == 1) {TextInput(DataGrid(event.target).itemEditorInstance).restrict = "0-9";TextInput(DataGrid(event.target).itemEditorInstance).maxChars = 9;}}public function editOver(event:DataGridEvent):void {if (event.columnIndex == 0) {var str:String = CellTextButton(DataGrid(event.target).itemEditorInstance).txt.text;testGrid.selectedItem.code = str;}}public function btnClick(event:MouseEvent):void {Alert.show("Do something");}
?
偶了。
?
?
?
?