传统应用中有这个一个很好的效果,即一个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");
}
偶了。
- 大小: 789 Bytes
分享到:
相关推荐
Flex创建可编辑以及分页的DataGrid,对熟悉和使用datagrid控件是一个很好的例子。
Flex4.6 开发的关于DataGrid控件,在其中嵌套了comboBox,控制是否可航编辑,添加删除一行,光表定位,查了好些资料,可直接运行
My Flex-DataGrid源码及资料 包含: 1、鼠标右键 2、鼠标双击可编辑 3、插入chechbox控件 4、与数据集的正反绑定
Flex 动态给DataGrid增加行,可编辑行数据
Flex动态datagrid可以进行增删改查
flex中动态添加复选框(checkBox)。
DataGrid具有以下功能:表头是动态生成的、每行都是有序号的、每行都是可以编辑、插入、删除、修改,接下来为大家分享下Flex如何动态生成可编辑的DataGrid
使用Flex,Java,Json更新Mysql数据库 已经介绍了如何使用Json格式的数据从后台用remoteObject的方法读取后现在Flex的DataGrid中。但是如果数据的量很大,就要使用scroll的方式来浏览了,这样造就了很多不变。参考了...
创建可编辑的list 组件 5.2节.为List的某项设置图标 5.3 节. 为List的内容变更添加特效 5.4为TileList创建一个基本的条目渲染器 5.5节.为Tree设置XML数据 5.6节.为Tree创建项渲染器 5.7节.在Tree控件中使用复杂数据...
flex自身带的datagrid列表操作比方便,上传个可以增删改的datagird。
asp.net 2.0下嵌套masterpage页的可视化编辑 C# 2.0与泛型 动态调用对象的属性和方法——性能和灵活性兼备的方法 泛型技巧系列:用泛型打造可复用的抽象工厂 泛型技巧系列:如何提供类型参数之间的转换 .NET 2.0 ...