Flex中在DataGrid加载数据时显示Loading... -
- ITeye技术网站
网络状况是互联网发展与软件发展的一个很大的瓶颈，如果哪天访问网上资源能象访问本地硬盘，或者能象访问内存那样快，那样咱们的计算机以后只需要输入输出设备以及网络设备就可以了，哈哈，这只是一个美好的愿望。
Flex应用在Web开发上，避免不了网络问题，下面的说明如何在加载数据时显示Loading状态，刚刚接触Flex不久，欢迎拍砖。
原理是这样的，首先定义了两一个ViewState,其中一个就是Loading状态，当点击按钮的时候就显示这个Loading视图，直到数据加载完之显示数据的视图。
先看效果图片：
首先，点击了按钮之后就会由于网络问题显示一个遮罩，上面用了一个Label显示Loading...字样，当然这里可以用任何更加漂亮的东西替换，比如GIF的图片。这里的网络问题由于是在自己的机器上测试，是人为造成的，我的服务器代码是使用的JAVA，在服务器上延迟了三秒加载数据。
三秒之后显示：
&?xml version="1.0" encoding="utf-8"?&
&mx:Application xmlns:mx="/2006/mxml" layout="absolute"&
&mx:states&
&!--加载视图,可以自己制作加载画面，
这个例子就只用了一个LABEL表示一下正在加载--&
&!--数据加载成功后的State--&
&mx:State name="ListState"&
&mx:AddChild relativeTo="{pl}" position="lastChild"&
&mx:Canvas id="can" width="100%" height="100%"&
&mx:DataGrid id="dg" horizontalCenter="0" width="100%" height="100%" &
&mx:columns&
&mx:DataGridColumn headerText="Id" dataField="p_id"/&
&mx:DataGridColumn headerText="Title" dataField="p_title"/&
&/mx:columns&
&/mx:DataGrid&
&/mx:Canvas&
&/mx:AddChild&
&/mx:State&
&!--加载状态的视图--&
&mx:State name="LoadingState" basedOn="ListState"&
&mx:AddChild relativeTo="{can}" position="lastChild"&
&mx:Canvas id="shade" width="100%" height="100%"
backgroundColor="blue" backgroundAlpha="0.1"&
&mx:Label text="Loading..." horizontalCenter="0" verticalCenter="0" fontSize="14"/&
&/mx:Canvas&
&/mx:AddChild&
&/mx:State&
&/mx:states&
&mx:Script&
import mx.rpc.AsyncT
public function listLoad() {
this.currentState = "LoadingState";
//var loadListResponder:LoadListResponder = new LoadListResponder(this, this.dg);
//var token:AsyncToken = listLoadService.send();
//token.addResponder(loadListResponder);
listLoadService.send();
&/mx:Script&
&mx:HTTPService id="listLoadService"
url="http://...."
method="post"&
&mx:result&
this.dg.dataProvider = listLoadService.lastResult.data.problems.
this.currentState = "ListState";
&/mx:result&
&/mx:HTTPService&
&mx:Panel id="pl" title="lOAding..." width="400" height="300"&
&/mx:Panel&
&mx:Button x="10" y="333" label="Load Data" click="listLoad()"/&
&/mx:Application&
参考文章：
I am using showbusycursor on my HTTPService so that while the datagid is loading is that the
cursor at least changes but I would like to do more like graying out the datagrid or something.
But I am not sure where to start I tried:
&mx:DataGrid dataProvider="{repRoleUsersXLC}" width="100%" height="90%"
id="AssUsersDG"
updateComplete="this.enabled=true"
creationComplete="this.enabled=false"/&but it didn't do as expected it disabled the scroll bar but I hoped it would disable grid.
But I would like to do something that is really clear the data grid is loading and reloading thanks for any help.
You could use a loading state like I've shown you below, the loading text could be an animation or whatever you choose. In real use you would make this a custom component but to keep things simple I've just made it an app, and I've used a button to simulate the load but you would obviously change your events on the grid to do that instead:&mx:DataGrid dataProvider="{repRoleUsersXLC}" width="100%" height="90%"id="AssUsersDG"updateComplete="currentState=null"creationComplete="currentState='loading'"/&
&!-- richText --&
浏览: 4499 次
来自: 杭州
博主你调通了吗?我做的和你的步骤一样，但是报Current t ...下次自动登录
现在的位置:
& 综合 & 正文
Flex使用弹出窗口为DataGrid添加新数据
经常在Demo中会看到列表，表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交，这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。
例子展示：
首先，我们开始建设一个基本的界面结构，一个带有“Notes"标题的Panel,一个DataGrid，以及一个用于提交数据的按钮。
&?xml version="1.0" encoding="utf-8"?&
&mx:Application
xmlns:mx="/2006/mxml"
layout="absolute"
width="500" height="300"&
&mx:Panel title="Notes"
width="100%" height="100%"
layout="vertical" horizontalAlign="right"
paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3"&
&mx:DataGrid width="100%" height="100%"&
&mx:columns&
&mx:DataGridColumn headerText="Author" dataField="author" width="80"/&
&mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/&
&mx:DataGridColumn headerText="Description" dataField="description"/&
&/mx:columns&
&/mx:DataGrid&
&mx:Button label="Add Note"/&
&/mx:Panel&
&/mx:Application&
这些看起来并不陌生，DataGrid三个列的数据对应我们Note类的三个属性，我们定义Note类如下：
public class Note
public var author:S
public var topic:S
public var description:S
要真正使得我们的数据开始运转，我们还需要一个脚本块：需要一个数据结构来保存我们的Note信息。这里我们使用notes：ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示，是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.
&mx:Script&
&!--[CDATA[
import mx.collections.ArrayC
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
&/mx:Script&
然后在把它设置成为datagrid的provider.
&mx:DataGrid dataProvider="{notes}" width="100%" height="100%"&
&mx:columns&
&mx:DataGridColumn headerText="Author" dataField="author" width="80"/&
&mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/&
&mx:DataGridColumn headerText="Description" dataField="description"/&
&/mx:columns&
&/mx:DataGrid&
接下来，我们就要创建一个弹出的窗口，这里使用的是Flex组件TitleWindow.我们起名为AddNote.mxml.它将用于输入界面，通过它，可以输入与datagrid三列属性对应的数据。它还包含两个按钮：cancel和save.
&?xml version="1.0" encoding="utf-8"?&
&mx:TitleWindow xmlns:mx="/2006/mxml"
layout="absolute" width="348" height="218"
title="Add A Note"&
&mx:Label text="Author" x="35" y="10"/&
&mx:TextInput id="author" width="150" x="84" y="8"/&
&mx:Label text="Topic"
y="36" x="42"/&
&mx:TextInput id="topic" width="150" x="84" y="34"/&
&mx:Label text="Description"
y="62" x="10"/&
&mx:TextArea id="description" width="234" height="77" x="84" y="61"/&
&mx:Button label="Cancel" x="193" y="146"/&
&mx:Button label="Save" x="264" y="146"/&
&/mx:TitleWindow&
好了，我们已经拥有一个可以作为数据输入的界面，我们还要在我们的主中设定在某个合适的时间初始化并且显示这个窗口，这个任务就交给了Application的creation complete事件。即在Application 创建的时候执行：
&mx:Application
xmlns:mx="/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()"&
在这个init()函数中，我们创建了AddNote的一个实例，并设置监听来自save按钮的saveNote事件
private var addNoteScreen:AddN
private function init():void
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
&mx:Button label="Add Note" click="addNote()"/&
当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。
private function addNote():void
PopUpManager.addPopUp(addNoteScreen, this, true);
PopUpManager.centerPopUp(addNoteScreen);
addNoteScreen.author.text = "";
addNoteScreen.topic.text = "";
addNoteScreen.description.text = "";
这里有两个方法，方法一addPopUp，就是弹出窗口，这里我们传输了三个参数，addNoteScreen为AddNote的一个实例，this为当前窗口，true为是否设是否只有弹出的窗口可被点击，即是否只有弹出的窗口处于Active状态。第二个方法，就是设置弹出窗口的位置。
当窗口弹出来的时候，我们可以做两件事情，一提交保存用户输入数据，二是简单的关闭窗口。如果关闭窗口，我们也使用PopManager管理器：
&mx:Script&
&!--[CDATA[
import mx.managers.PopUpM
private function close():void
PopUpManager.removePopUp(this);
&/mx:Script&
&mx:Button label="Cancel" click="close()" x="193" y="146"/&
若要保存用户提交的数据，我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件，而这个&metadata&标记将在TitleWindow中创建。
&mx:Metadata&
[Event(name="SaveNote")]
&/mx:Metadata&
要调度这个时间，我们必须和按钮save挂钩起来：
&mx:Button label="Save" click="save()" x="264" y="146"/&
这个方法将添加到脚本中，这个方法就是简单调度SaveNoe事件：
private function save():void
this.dispatchEvent(new Event("SaveNote"));
下面是TitleWindow所有代码：
&?xml version="1.0" encoding="utf-8"?&
&mx:TitleWindow xmlns:mx="/2006/mxml"
layout="absolute" width="348" height="218"
title="Add A Note"&
&mx:Metadata&
[Event(name="SaveNote")]
&/mx:Metadata&
&mx:Script&
&!--[CDATA[
import mx.managers.PopUpM
private function close():void
PopUpManager.removePopUp(this);
private function save():void
this.dispatchEvent(new Event("SaveNote"));
&/mx:Script&
&mx:Label text="Author" x="35" y="10"/&
&mx:TextInput id="author" width="150" x="84" y="8"/&
&mx:Label text="Topic"
y="36" x="42"/&
&mx:TextInput id="topic" width="150" x="84" y="34"/&
&mx:Label text="Description"
y="62" x="10"/&
&mx:TextArea id="description" width="234" height="77" x="84" y="61"/&
&mx:Button label="Cancel" click="close()" x="193" y="146"/&
&mx:Button label="Save" click="save()" x="264" y="146"/&
&/mx:TitleWindow
要把弹出窗口中用户输入的数据显示在Application 中的datagrid中，其实也很简单，就是要数据绑定。前面的[Bindable]中的notes:ArrayCollecton就要与我们弹出窗口中的用户输入数据绑定起来。这个方法由save按钮触发后执行：
private function saveNote(e:Event):void
var note:Note = new Note();
note.author = addNoteScreen.author.
note.topic = addNoteScreen.topic.
note.description = addNoteScreen.description.
notes.addItem(note);
PopUpManager.removePopUp(addNoteScreen);
在绑定之后，即显示在Application datagrid中之后，我们要把弹出的窗口关闭，即removePopUp。这里就是全部的介绍了，下面是Application的代码：
&?xml version="1.0" encoding="utf-8"?&
&mx:Application
xmlns:mx="/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()"&
&mx:Script&
&!--[CDATA[
import mx.managers.PopUpM
import mx.collections.ArrayC
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
private var addNoteScreen:AddN
private function init():void
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
private function addNote():void
PopUpManager.addPopUp(addNoteScreen, this, true);
PopUpManager.centerPopUp(addNoteScreen);
addNoteScreen.author.text = "";
addNoteScreen.topic.text = "";
addNoteScreen.description.text = "";
private function saveNote(e:Event):void
var note:Note = new Note();
note.author = addNoteScreen.author.
note.topic = addNoteScreen.topic.
note.description = addNoteScreen.description.
notes.addItem(note);
PopUpManager.removePopUp(addNoteScreen);
&/mx:Script&
&mx:Panel title="Notes"
width="100%" height="100%"
layout="vertical" horizontalAlign="right"
paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3"&
&mx:DataGrid dataProvider="{notes}" width="100%" height="100%"&
&mx:columns&
&mx:DataGridColumn headerText="Author" dataField="author" width="80"/&
&mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/&
&mx:DataGridColumn headerText="Description" dataField="description"/&
&/mx:columns&
&/mx:DataGrid&
&mx:Button label="Add Note" click="addNote()"/&
&/mx:Panel&
&/mx:Application&
&&&&推荐文章:
【上篇】【下篇】怎么判断一个对象是否为空呢 - Flex当前位置:& &&&怎么判断一个对象是否为空呢怎么判断一个对象是否为空呢&&网友分享于：&&浏览：301次如何判断一个对象是否为空呢在AdvancedDataGrid中的第一列我构建的一个树结构，我现在想判断点击的行是否为空，该怎么办我现在在写的是if（dg_viewBook.selectedItem.book_name==null）dg_viewBook是AdvancedDataGrid控件的ID想用它判断这个对象是否是空，但是一调试就说对象为引用或属性值为空，又什么办法可以将dg_viewBook.selectedItem.book_name是空判断出来呢------解决方案--------------------
AdvancedDataGrid的数据源是什么类型的啊？ArrayCollection还是XML?
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有