mx.controls.DataGrid组件SelectedIndex异常

最新推荐文章于 2020-06-11 16:18:54 发布

zengge1986

最新推荐文章于 2020-06-11 16:18:54 发布

阅读量686

点赞数

分类专栏： flex 文章标签： datagrid radiobutton application function library components

本文链接：https://blog.csdn.net/zengge1986/article/details/7623792

版权

flex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

场景：
1.动态的在ArrayCollection增加5个元素，由于绑定DataGrid会增加5行
2.选中除了最后一行的任何行，删除该行后，DataGrid的selectedIndex会出现异常（选中最后一行删除，没有异常）：
比如选中第2行删除后，给它的selectedIndex赋值为第二行，但是它不会选中第二行，
而是第三行
3.经过测试应该是mx.controls.DataGrid自己bug，相同的代码使用spark.components.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="init()"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="com.runqianapp.complex.view.show.*">
	<fx:Declarations>
		<s:RadioButtonGroup id="viewRadionGroup" change="viewRadionGroup_changeHandler(event)">
			
		</s:RadioButtonGroup>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.runqianapp.complex.view.logic.ComplexGuideAS;
			import com.runqianapp.complex.view.show.ComplexGuide;
			import com.runqianapp.ngr.event.ComplexGuideEvent;
			import com.runqianapp.ngr.event.ComplexGuideEventDispatcher;
			
			import controller.ConstLocator;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			import mx.managers.PopUpManagerChildList;
		
			[Bindable]
			public var columnDataGridArrayCollection:ArrayCollection = new ArrayCollection();
			
			/** 增加事件*/
			private function addColumnClick(event:MouseEvent):void{
				var obj:Object = new Object();
				obj.id = columnDataGridArrayCollection.length + 1;

				columnDataGridArrayCollection.addItem(obj);
				if(viewStack.selectedIndex==0){
					columnDataGridForMX.selectedIndex = columnDataGridArrayCollection.length - 1;
				}else if(viewStack.selectedIndex==1){
					columnDataGridForSpark.selectedIndex = columnDataGridArrayCollection.length - 1;
				}else{
					columnDataGridForAdvanced.selectedIndex = columnDataGridArrayCollection.length - 1;
				}
				
			}
			
			/** 删除事件*/
			private function removeColumnClick(event:MouseEvent):void{
				var index:int = 0;
				if(viewStack.selectedIndex==0){
					index = columnDataGridForMX.selectedIndex;
				}else if(viewStack.selectedIndex==1){
					index = columnDataGridForSpark.selectedIndex;
				}else{
					index = columnDataGridForAdvanced.selectedIndex;
				}
				
				if(columnDataGridArrayCollection.length>0)
					columnDataGridArrayCollection.removeItemAt(index);
				if(viewStack.selectedIndex==0){
					columnDataGridForMX.selectedIndex = index<columnDataGridArrayCollection.length?index:columnDataGridArrayCollection.length-1;
				}else if(viewStack.selectedIndex==1){
					columnDataGridForSpark.selectedIndex = index<columnDataGridArrayCollection.length?index:columnDataGridArrayCollection.length-1;
				}else{
					columnDataGridForAdvanced.selectedIndex = index<columnDataGridArrayCollection.length?index:columnDataGridArrayCollection.length-1;
				}
			}
			
			protected function viewRadionGroup_changeHandler(event:Event):void
			{
				viewStack.selectedIndex = parseInt(String(viewRadionGroup.selectedValue))
			}
			
		]]>
	</fx:Script>
	<mx:VBox width="100%" horizontalAlign="center" height="100%" verticalAlign="middle">
		<mx:HBox>
			<s:RadioButton value="0" label="MX" groupName="viewRadionGroup" selected="true"></s:RadioButton>
			<s:RadioButton value="1" label="Spark" groupName="viewRadionGroup"></s:RadioButton>
			<s:RadioButton value="2" label="Advanced" groupName="viewRadionGroup"></s:RadioButton>
		</mx:HBox>
		
		<mx:ViewStack id="viewStack">
			<mx:VBox>
				<mx:DataGrid id="columnDataGridForMX" width="200" textAlign="center" dataProvider="{columnDataGridArrayCollection}" editable="true" dragEnabled="false" sortableColumns="false">
					<mx:columns>
						<mx:DataGridColumn headerText="mx序号" dataField="id" width="40" editable="false" textAlign="center"/>
					</mx:columns>
				</mx:DataGrid>
			</mx:VBox>
			<mx:VBox>
				<s:DataGrid id="columnDataGridForSpark" width="100%" textAlign="center" dataProvider="{columnDataGridArrayCollection}" >
					<s:columns>
						<s:ArrayList>
							<s:GridColumn dataField="id" headerText="s序号"/>
						</s:ArrayList>
					</s:columns>
				</s:DataGrid>
			</mx:VBox>
			<mx:VBox>
				<mx:AdvancedDataGrid id="columnDataGridForAdvanced" width="100%" textAlign="center" dataProvider="{columnDataGridArrayCollection}" editable="true" dragEnabled="false" sortableColumns="false" headerSortSeparatorSkin="mx.skins.ProgrammaticSkin">
					<mx:columns>
						<mx:AdvancedDataGridColumn headerText="advanced序号" dataField="id" width="40" editable="false" textAlign="center"/>
					</mx:columns>
				</mx:AdvancedDataGrid>
			</mx:VBox>
		</mx:ViewStack>
		<mx:VBox width="15%" height="100%" paddingTop="17" horizontalAlign="center">
			<s:Button id="addColumn" label="增加" width="45" height="20" click="addColumnClick(event)"/>
			<s:Button id="removeColumn" label="删除" width="45" height="20" click="removeColumnClick(event)"/>
		</mx:VBox>
	</mx:VBox>
	
</s:Application>

建议：
1.如果使用ArrayCollection作为DataGrid组件的数据源，尽量不要使用mx.controls.DataGrid
2.改用mx.controls.AdvancedDataGrid将属性设置：headerSortSeparatorSkin="mx.skins.ProgrammaticSkin"
sortableColumns="false" 就可以去掉标题中的竖线和排序图标，效果和mx.controls.DataGrid没有区别,但是还是存在bug，不建议使用
3.如果DataGrid中的列都为简单的列，不存在为列设置ItemRender的情况下，使用spark.components.DataGrid更为简便，
不需要设置2中的那些属性；但是如果涉及到ItemRender
就可能会导致flex报Error #1009，由于itemRenderer的类型不符（flex3和4导致），
具体情况可参考：http://blog.csdn.net/zhengdanwei/article/details/7241622，相当来说比较复杂。