第10章 使用列表和表格.ppt

第10章 使用列表和表格 用户界面中，常利用表格和列表显示数据的条目和详细信息。Flex设计了不同的控件来实现列表和表格，不仅能够将数据显示在表格和列表中，还可以实现对数据进行操纵、修改等更为强大的功能。由于这些控件的数据格式都需是格式化的数据，数据提供器读取结构化的数据，这些控件也称之为数据驱动控件（Data-driven Controls）。与列表和表格相关的控件如下所示。 列表控件（List Control）：将数据显示在垂直的列表中。 水平列表控件（HorizontalList Control）：与列表控件相似，水平列表控件则是以水平的方式横向浏览数据。 片式列表控件（TileList Control）：与上述2种列表控件类似，片式列表中不仅可以显示文字、数据，还可以显示该数据相关的图片。 组合框控件（ComboBox Control）与其他列表式控件不同，组合框控件只需占用很少的界面控件，单击控件中的下拉箭头，可动态弹出列表栏选择需要的数据选项。 数据表格控件（DataGrid Control）对于某一类数据，往往包括很多数据项，比如一个学生的数据包括：年龄、性别、出生年月等，利用数据表格控件，可以以行和列的方式表达多个学生的详细信息。 树形控件（Tree Control）：将结构化的数据显示到树形的结构中。在树形控件中的，利用树形的叶子节点以及叶子节点的双亲节点表示数据之间的关联。 10.1 列表和表格控件接口类 上述几种控件在Flex中，都同样直接或间接地继承mx.controls.listClasses.ListBase类。所以在这些控件中均继承该类的属性和事件。本节简要介绍ListBase类属性和方法。 10.1.1 ListBase类属性 ListBase类的属性主要围绕控件的行、列、数据和控件其他功能。由于属性较多，这里只选择常用的进行讲述。ListBase类常用属性如表所示。 10.1.2 ListBase类事件 ListBase类事件是使用列表和表格控件时涉及的相关事件，具体有如下几种： change：当控件的selectedIndex和selectedItem属性值发生改变时，触发该事件。 dataChange：在使用其他组件作为控件的条目渲染器时，利用data属性指定在控件中显示的内容，当该内容改变时触发该事件。 itemClick：当用户单击条目时，触发该事件。 itemDoubleClick：当用户双击条目时，触发该事件。 itemRollOut：当鼠标在条目上滚动时，触发该事件。 itemRollOver：当鼠标停留在某个条目上，触发该事件。每次鼠标停留在条目上时，控件高亮显示该条目。 10.2 列表 列表控件（List Control）将数据显示在垂直的列表中。用户在显示的数据条目中选择自己需要列项。。如果列表数据的尺寸超出控件的尺寸时。可以拖动控件中的水平或者垂直的滚动条显示。列表控件如图所示。 10.2.1 列表控件标签 在Flex中使用mx:List标签创建列表控件。同时列表控件的外观及事件都是由控件的属性定义。列表控件的属性除集成ListBase类的属性外，还包括如表所示的常用属性。 10.2.2 列表控件事件 列表控件的事件除继承ListBase类的事件外还包括条目编辑时的事件。条目编辑事件如下所示： itemEditBegin：当对条目进行编辑，即editedItemPosition属性被赋值时，触发该事件。该事件表明条目处于准备被编辑的状态。 itemEditBeginning：用户单击条目时进入itemEditBegin状态，在用户释放鼠标时，触发该事件，进入条目编辑状态。 itemEditEnd：完成条目编辑。当编辑后的数据从条目编辑器中保存到数据提供器中时，触发该事件。 itemFocusIn：当鼠标焦点停留在条目渲染器时，触发该事件。 itemFocusOut：当条目渲染器失去鼠标焦点时，触发该事件。 scroll：如果控件中出现滚动条，则拖动滚动条时触发该事件。 上述几个事件的事件对象类型均为mx.events.ListEvent。 10.2.3 创建列表控件 创建列表控件使用的是mx:List标签。通过为列表控件设置不同的属性和事件满足不同的需求。为了更清楚的讲述如何创建控件，如何使用控件的事件和更复杂的属性。这里采用由浅至深的顺序，首先从最简单的例子讲述。 10.2.4 列表控件事件 定义列表控件事件是为与列表控件相关的事件创建事件处理函数。上面的两个例子为简单的列表控件例子，只显示需要的数据标签，而无其他功能。但是在实际需求中，在用单击相应条目时，或者当鼠标在各条目上滚动时，都需要与用户进行交互。 下面的这个例子显示了，当鼠标在列表条目上