传统应用中有这个一个很好的效果,即一个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 file
import 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");
}
偶了。