`

Flex4 学习笔记-comboBox 和 DataGrid组件的使用

    博客分类:
  • Flex
 
阅读更多

 

下面讲介绍一下..ComboBox 和DataGrid 两种组件的使用.

这两种组件用的非常多.

 

ComboBox是下拉列表. 只需要通过dataProvider,属性绑定一个集合.

就能自动把集合中的数据,填充到ComboBox中.

 

DataGrid 是 数据表格. 也是通过.dataProvider绑定 集合对象..可以自动填充列.和自定义列.. DataGrid可以实现列拖动和列排序效果..

 

具体代码实现如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="application1_creationCompleteHandler(event)"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			[Bindable]
			private var comboBoxData:ArrayCollection = null;
			
			//单击事件;重新填充ComboBox下拉列表;
			protected function btn_clickHandler(event:MouseEvent):void
			{
				comboBoxData = new ArrayCollection([
					{label:"请选择"},
					{label:"Java"},
					{label:".NET"},
					{label:"C++"},
					{label:"SAP"}
				]);	
			}
			
			//绑定;
			[Bindable]
			private var dataGridData:ArrayCollection = new ArrayCollection([
				{id:"100",name:"张三",age:"23",sex:"男",address:"湖南省株洲市"},
				{id:"101",name:"李四",age:"20",sex:"女",address:"广东省深圳市"},
				{id:"102",name:"王五",age:"22",sex:"女",address:"江西省萍乡市"}
			]);
			
			
			//加载时触发的事件;
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				//实例化数据集合;
				comboBoxData = new ArrayCollection([
					{label:"请选择"},
					{label:"JavaScript"},
					{label:"VBScript"},
					{label:"ActionScript"}
				]);	
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:DataGrid width="618" id="dataGridID" dataProvider="{dataGridData}" >
		 <mx:columns>
			 <!--headerText指定的是列名,dataField指定的是需要绑定列的字段-->
			<mx:DataGridColumn headerText="编号" dataField="id"/>
			<mx:DataGridColumn headerText="姓名" dataField="name"/>
			<mx:DataGridColumn headerText="年龄" dataField="age"/>
			<mx:DataGridColumn headerText="性别" dataField="sex"/>
			<mx:DataGridColumn headerText="地址" dataField="address"/>
		</mx:columns>
	</mx:DataGrid>
	
	<s:Button id="btn" click="btn_clickHandler(event)" label="填充ComboBox下拉列表"></s:Button>
	
	<s:ComboBox id="comboBox" selectedIndex="0" dataProvider="{comboBoxData}"></s:ComboBox>
	
	
</s:Application>

 

运行结果:



 

  • 大小: 8.4 KB
分享到:
评论

相关推荐

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

    本视频教程聚焦于Flex4中两个重要的组件:ComboBox和DataGrid,它们在数据展示和用户交互方面扮演着重要角色。 ComboBox组件是Flex中的一个下拉列表选择控件,它结合了输入框和下拉列表的功能。用户可以手动输入...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在前端开发中,EasyUI 是一个基于 ...通过学习和理解这个实例,开发者可以更好地掌握 EasyUI 中的 `easyui-textbox` 和 `easyui-combobox` 的使用,以及如何处理 `onchange` 事件,从而提升项目开发的效率和质量。

    前端项目-bootstrap-combobox.zip

    然后,你需要引入Combobox的CSS和JS文件,通常它们位于`bootstrap-combobox-master/dist`目录下。接着,对HTML元素应用`combobox`类,并通过`data-toggle="combobox"`属性激活插件功能。例如: ```html ...

    easyui-combobox、combotree后台数据数据组装与前台绑定实例

    总结来说,"easyui-combobox、combotree后台数据数据组装与前台绑定实例" 主要涉及两个部分:后端 C# 数据组装成 JSON 格式,以及前端使用 EasyUI 的 Combobox 和 Combotree 组件进行数据绑定。通过这样的方式,我们...

    X-COMBOBOX

    本文将深入探讨X-COMBOBOX的特性和使用方法,以及如何通过图标来增强界面的视觉效果。 **一、X-COMBOBOX的基本概念** X-COMBOBOX是一种组合框(ComboBox)控件的扩展版本,它继承了标准组合框的基本功能,如文本...

    jquery.ajax-combobox, jQuery插件,创建一个文本框,可以以自动完成并下拉选择.zip

    jquery.ajax-combobox, jQuery插件,创建一个文本框,可以以自动完成并下拉选择 jquery.ajax-combobox 可以自动完成和pull-down-select的文本框的jQuery插件。 演示http://www.usamimi.info/~sutara/ajax-combobox

    在easyui-combobox多选模式下加入选择所有选项

    你可以使用`combobox`组件的`onLoadSuccess`回调函数来判断数据是否加载成功,然后再执行上述逻辑。 总之,通过结合EasyUI的Combobox组件和自定义的JavaScript代码,我们可以轻松实现多选模式下的“选择全部”功能...

    Datagrid中使用combobox

    本篇文章将深入探讨如何在DataGrid中集成ComboBox,以及其在实际应用中的使用技巧。 首先,我们需要理解DataGrid和ComboBox的基本概念。DataGrid是WPF中的一个UI元素,用于显示数据集合,并允许用户进行交互,如...

    Extjs4---combobox省市区三级联动+struts2

    总的来说,这个项目涵盖了ExtJS 4的ComboBox组件使用、事件监听、数据绑定,以及Struts2框架的Action处理、JSON数据交互等技术。通过这种方式,我们可以构建一个动态、交互性强的省市区选择功能,既满足了用户操作的...

    ComboBox in DataGrid tutorial

    在本教程中,我们将探讨如何在Flex 3中动态地将ComboBox添加到DataGrid控件中,使用ActionScript 3来实现。此方法对于那些在项目初始阶段不确定列数(例如,数据是从数据库读取的情况)的情况下非常有用。我们将从头...

    ios-自定义ComboBox下拉框组件.zip

    在iOS开发中,为了提供用户友好的交互体验,开发者经常需要自定义一些UI组件来满足特定需求。...通过深入理解和使用这个组件,开发者不仅可以提升应用的用户体验,还能减少重复劳动,专注于更复杂的业务逻辑。

    easyui的datagrid中editor和combobox的级联

    而本文主要探讨的是在`datagrid`组件中如何实现`editor`和`combobox`的级联效果。 #### 一、基础概念介绍 1. **Datagrid**: `datagrid`是一个灵活的表格控件,它可以显示数据库中的记录,并且可以进行各种操作如...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果,这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用,比如在本例中的“老师分类”和“老师细类”。...

    wpf 自定义ComBoBox带DataGrid

    4. **事件处理(Event Handling)**:为了响应用户的选择和交互,我们需要捕获和处理各种控件事件,比如ComboBox的SelectionChanged事件和DataGrid的CellClick事件。 5. **依赖属性(Dependency Property)**:为了...

    flex datagrid 中实现combobox联动

    在Flex编程中,数据网格(DataGrid)是用于展示大量结构化数据的组件,而ComboBox是一种下拉选择框,常用于提供用户可选择的选项。当我们需要在DataGrid的不同列中实现ComboBox的联动效果时,即在一个ComboBox的选择...

    combobox 下拉多选框带搜索功能

    在IT行业中,组合框(ComboBox)是一...通过分析和理解"MultiComboSearch_2.js",我们可以学习到如何构建这样一个高效、易用的UI组件。如果你希望深入研究,可以从源码入手,逐步理解其工作原理并尝试进行定制化改造。

    jquery-combobox2Demo

    jquery-combobox2Demo 网上都有的例子保存在这里方面下载

    Flex DataGrid 内嵌ComboBox 再内嵌一个 DataGrid

    本文将深入探讨如何在Flex DataGrid组件中内嵌ComboBox,并且ComboBox中再内嵌一个DataGrid,这是一项高级的UI设计技术,能够提供复杂的数据展示和交互功能。 首先,让我们理解Flex DataGrid组件。DataGrid是Flex中...

    Flex4_ProgressBar_Combobox_NumericStepper

    在Flex4中,开发人员可以利用强大的组件库来构建丰富的用户界面。...同时,源码示例也提供了很好的参考,帮助开发者快速掌握Flex4中的ProgressBar、ComboBox和NumericStepper组件,从而提高开发效率和用户体验。

Global site tag (gtag.js) - Google Analytics