flex 上拉页面显示datagrid

来源：互联网发布：销售数据分析范文编辑：程序博客网时间：2024/05/22 01:58

flex：3.0

本篇blog参考：http://blog.minidx.com/2008/08/02/1208.html、http://blog.minidx.com/2008/10/04/1473.html

写这篇博客主要是因为这两天做的东西涉及到了flex中的visible和includeinlayer属性，通过这两个属性可以重新布局页面，达到动态布局的效果，但是自己在做的时候，设置这两个属性的时候老是有问题，可能是和其他东西冲突吧，不过写了一个简单的进行测试，就很容易通过了。下面给出代码和效果：

效果1：（参考链接1，这个不是通过visible和includeinlayer属性设置的）

原始页面：

点击show，出现下面的界面（直接上拉填充页面）：

代码如下：

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"        layout="vertical"        verticalAlign="middle"        backgroundColor="white">     <mx:transitions>        <mx:Transition fromState="*" toState="*">            <mx:Parallel targets="{[vbox2]}">                <mx:WipeDown />                <mx:Fade />            </mx:Parallel>        </mx:Transition>    </mx:transitions>     <mx:states>        <mx:State name="expanded">            <mx:AddChild relativeTo="{vbox3}" position="after">                <mx:VBox id="vbox2"                        width="100%"                        height="100%"                        backgroundColor="haloGreen" textAlign="center">                    <mx:DataGrid id="bId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" ><mx:columns><mx:DataGridColumn headerText="bbb Text" dataField="bbb" /> </mx:columns> </mx:DataGrid>                </mx:VBox>            </mx:AddChild>        </mx:State>    </mx:states>     <mx:Style>        VBox {            paddingLeft: 10;            paddingRight: 10;            paddingTop: 10;            paddingBottom: 10;        }    </mx:Style>     <mx:Script>        <![CDATA[        import mx.collections.ArrayCollection;            import mx.effects.easing.*;                        private var helpIcon:Class;             private function toggleExpanded():void {                switch (currentState) {                    case "expanded":                        currentState = "";                        break;                    default:                        currentState = "expanded";                        break;                }            }            [Bindable]            private var arr_my:ArrayCollection=new ArrayCollection([            {aaa:"aaa",bbb:"bbb"},{aaa:"a1aa",bbb:"1bbb"},{aaa:"aaa2",bbb:"bbb2"}                        ]);        ]]>    </mx:Script>     <mx:VBox width="100%" height="100%">        <mx:VBox id="vbox1"                width="100%"                height="50"                 textAlign="center">            <mx:HBox>            <mx:Label text="测试上拉窗口示例" />            <mx:Button label="show" click="toggleExpanded()" />        </mx:HBox>        </mx:VBox>         <mx:VBox id="vbox3"                width="100%"                height="100%"                backgroundColor="haloBlue"                 textAlign="center">            <mx:DataGrid id="aId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" ><mx:columns><mx:DataGridColumn headerText="aaa Text" dataField="aaa" /> </mx:columns> </mx:DataGrid>        </mx:VBox>    </mx:VBox> </mx:Application>

效果二，（参考链接2，这个是通过visible和includeinlayer属性设置的）

原始页面：

点击show，得到：

原始代码如下：

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert; [Bindable]            private var arr_my:ArrayCollection=new ArrayCollection([            {aaa:"aaa",bbb:"bbb"},{aaa:"a1aa",bbb:"1bbb"},{aaa:"aaa2",bbb:"bbb2"}                        ]);            [Bindable]            private var flag:Boolean =false;            private function la():void{            //Alert.show("ahh");            if(!flag){            flag=!flag;            }else{            flag=!flag;                        }            }]]></mx:Script><mx:VBox x="100" y="100" width="500" height="500" backgroundColor="white"><mx:HBox width="100%" height="40"><mx:Label text="测试上拉界面" /><mx:Button label="show" click="la()" /></mx:HBox><mx:VBox width="100%" height="100%"><mx:DataGrid id="aId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" ><mx:columns><mx:DataGridColumn headerText="aaa Text" dataField="aaa" /> </mx:columns> </mx:DataGrid><mx:DataGrid id="bId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" visible="{flag}" includeInLayout="{flag}"><mx:columns><mx:DataGridColumn headerText="bbb Text" dataField="bbb" /> </mx:columns> </mx:DataGrid></mx:VBox></mx:VBox></mx:Application>

如果您觉得lz的blog或者资源还ok的话，可以选择给lz投一票，多谢。（投票地址：http://vote.blog.csdn.net/blogstaritem/blogstar2013/fansy1990 ）

分享，成长，快乐

转载请注明blog地址：http://blog.csdn.net/fansy1990

0 0