Flex 4.5 DataGrid 绑定Xml方法

最新推荐文章于 2019-09-28 19:13:38 发布

lxy1106

最新推荐文章于 2019-09-28 19:13:38 发布

阅读量3k

点赞数

分类专栏： Flex Builder 文章标签： datagrid flex xml library application encoding

本文链接：https://blog.csdn.net/lxy1106/article/details/7587134

版权

Flex Builder 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

从Flex4 后，Datagrid 组件就已经由原来的mx 换成spark.components.DataGrid 。原来mx下的DataGrid下可以直接绑定xml，但到了spark. 下的dataProvider 是需要实现Ilist接口的。整理后代码如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGXMLData.mxml -->
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	width="500">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<fx:XMLList id="employees">
			<employee>
				<name>Joanne Wall</name>
				<phone>555-219-2012</phone>
				<email>jwall@fictitious.com</email>
				<active>true</active>
			</employee>            
			<employee>
				<name>Mary Jones</name>
				<phone>555-219-2000</phone>
				<email>mjones@fictitious.com</email>
				<active>true</active>
			</employee>            
			<employee>
				<name>Maurice Smith</name>
				<phone>555-219-2012</phone>
				<email>maurice@fictitious.com</email>
				<active>false</active>
			</employee>            
			<employee>
				<name>Dave Davis</name>
				<phone>555-219-2000</phone>
				<email>ddavis@fictitious.com</email>
				<active>true</active>
			</employee>            
			<employee>
				<name>Tom Maple</name>
				<phone>555-219-2000</phone>
				<email>tmaple@fictitious.com</email>
				<active>true</active>
			</employee>            
		</fx:XMLList>
		<s:XMLListCollection id="employees2" source="{employees}"/>
	</fx:Declarations>
	
	<s:DataGrid id="dg" width="500" dataProvider="{employees2}">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="name" headerText="Name"/>
				<s:GridColumn dataField="phone" headerText="Phone"/>
				<s:GridColumn dataField="email" headerText="Email"/>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
	
	<s:Form>
		<s:FormItem label="Name">
			<s:Label text="{dg.selectedItem.name}"/>
		</s:FormItem>
		<s:FormItem label="Email">
			<s:Label text="{dg.selectedItem.email}"/>
		</s:FormItem>
		<s:FormItem label="Phone">
			<s:Label text="{dg.selectedItem.phone}"/>
		</s:FormItem>
	</s:Form>
</s:Application>

另外：如果XML数据源不是这种标准格式而是以Atturibe 呈现时，绑定字段时应以@连接，则应该做相应修改：

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGXMLData.mxml -->
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	width="500">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<fx:XMLList id="employees">
			<employee name="Joanne Wall" phone="555-219-2012" email="jwall@fictitious.com" active="true" />                     
		</fx:XMLList>
		<s:XMLListCollection id="employees2" source="{employees}"/>
	</fx:Declarations>
	
	<s:DataGrid id="dg" width="500" dataProvider="{employees2}">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="@name" headerText="Name"/>
				<s:GridColumn dataField="@phone" headerText="Phone"/>
				<s:GridColumn dataField="@email" headerText="Email"/>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
	
	<s:Form>
		<s:FormItem label="Name">
			<s:Label text="{dg.selectedItem.@name}"/>
		</s:FormItem>
		<s:FormItem label="Email">
			<s:Label text="{dg.selectedItem.@email}"/>
		</s:FormItem>
		<s:FormItem label="Phone">
			<s:Label text="{dg.selectedItem.@phone}"/>
		</s:FormItem>
	</s:Form>
</s:Application>

效果图：