使用ActionScript3在Flex3中动态添加DataGrid的ComboBox教程

需积分: 3 61 浏览量更新于2024-09-19 收藏 52KB PDF 举报

"ComboBox在DataGrid中的应用教程" 在本教程中，我们将深入探讨如何在Flex3中的DataGrid控件中动态添加ComboBox，主要通过使用ActionScript3来实现。我们将尽量减少MXML代码的使用，重点是用ActionScript3动态地填充内容。这种方法在你不确定初始列数量的情况下非常有用，比如数据是从数据库读取的情况。我们将逐步构建项目，因此如果你已经掌握了某些部分，可以直接跳到下一个章节。最终解决方案将包含一个扩展的DataGrid，其中包含两列ComboBox，填充不同的值。第一列是文本列，显示人员的名字；第二列是一个ComboBox，用于展示性别信息；第三列是另一个ComboBox，用于展示年龄信息。在DataGrid下方有一个按钮，点击后会显示网格中的当前信息，这些信息可以保存回数据库。项目中的类和对象首先，我们快速了解一下项目中涉及的类和对象： 1. **DataGrid**: 这是主显示组件，用于展示数据的网格布局。 2. **ComboBox**: 这是可下拉选择框，用户可以在预设的选项中进行选择。 3. **ArrayCollection**: 通常用于存储和管理数据，是Flex中的动态数组集合，可以方便地绑定到UI组件上。 4. **ActionScript3 Classes**: 我们将创建自定义的ActionScript类来处理数据加载、ComboBox的填充以及按钮事件。 5. **Event Handlers**: 需要编写事件处理器来响应用户操作，如按钮点击。步骤和实现 1. **设置基础结构**: 创建一个Flex项目，并在主MXML文件中添加DataGrid控件，以及一个按钮。 2. **定义数据模型**: 创建一个数据模型类，表示每个人员的信息，包括姓名、性别和年龄属性。 3. **创建数据源**: 使用ArrayCollection创建数据源，填充模拟的人员信息。 4. **创建ComboBox数据源**: 为每个ComboBox创建单独的数据源，分别填充性别和年龄的选项。 5. **动态添加Column**: 在ActionScript中，利用DataGridColumn类动态创建列，并设置其dataField属性，以便与数据源对应。 6. **创建ComboBox实例**: 对于每个列，创建ComboBox实例，并将其数据源绑定到相应的数据集。 7. **添加ComboBox到Cell**: 将创建的ComboBox添加到DataGrid的相应单元格中。 8. **处理按钮事件**: 编写按钮点击事件处理器，获取选中的数据并进行处理，如显示信息或保存回数据库。在实现过程中，你可能需要对以下技术有基本理解： - Flex布局和组件体系 - ActionScript3编程 - 数据绑定和事件处理 - ArrayCollection和数据模型的使用 - DataGrid控件的高级特性，如动态列和自定义单元格渲染这个教程将引导你完成整个过程，帮助你理解和掌握在Flex3中动态创建和使用ComboBox与DataGrid相结合的方法。通过实践，你可以更好地适应在不可预知数据结构的场景下开发富互联网应用程序（RIA）。

ComboBox Grid 2010-03-13

3 | 11

Next we need to add a script block that contains the actual function. The easiest way to do this is to

place the cursor on an empty line between the application start and end tags and write

<script and

press enter followed by a

> sign, this should add a script block like this.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#333333"

creationComplete="init()">

<mx:Script>

<![CDATA[

]]>

</mx:Script>

</mx:Application>

Within the CDATA block we write the functions, fields and properties we want to use in the

application. In this case we will add a function named

init that doesn’t return any value.

<![CDATA[

private function init():void

{

}

]]>

Import statements

The import statements generally will be added automatically when a control or class is used in the

application, but sometimes like if you copy and paste code between applications you need to add

them manually. Here’s a list of the imports used in this application. Imports are placed at the top of

the CDATA block.

import classes.ComboBoxItem;

import mx.controls.dataGridClasses.DataGridColumn;

import mx.controls.Alert;

import mx.collections.IViewCursor;

import mx.events.ListEvent;

import mx.events.FlexEvent;

import classes.ComboBoxContent;

import mx.collections.ArrayCollection;

The ComboBoxItems class

The first class we will write is a helper class that corresponds to an item in a ComboBox. This is

essential if we want to work with dynamic data to fill the ComboBox. Each item will have two

properties label and value, each corresponding to a default property in the ComboBox list. We will

start by adding a folder that will hold our classes.

Keep in mind that Action Script is case sensitive.

1. Right click on the applications’

src folder in the Flex Navigator and select New-Folderin the

context menu.

2. Write

classes in the Folder name text field and click the Finish button.

3. Now right click on the

classes folder that you just created and select New-ActionScript Class

in the context menu.

4. Write

ComboBoxItem in the Name text field and click the Finish button.

剩余10页未读，继续阅读

欧美噶

粉丝: 36
资源: 101

使用ActionScript3在Flex3中动态添加DataGrid的ComboBox教程

wpf 自定义ComBoBox带DataGrid

easyui的datagrid中editor和combobox的级联

Flex4视频教程_03-06ComboBox和DataGrid的使用.rar )

EasyUI框架：ComboBox与DataGrid组件详解

jQuery EasyUI与Combobox实现Datagrid多级联动教程

Flex DataGrid 内嵌ComboBox 再内嵌一个 DataGrid

Multi Select ComboBox in WPF

DataGrid动态绑定ComboBox

Datagrid中使用combobox

WPF中的DataGrid、Button、ComboBox等样式+DataGrid分页控件

最新资源