PDA

View Full Version : Auto Update GridPanel by TaskManager



mibhpwosiay
Nov 16, 2012, 8:29 AM
If you need a page that monitor your devices, such as devices status, update time....
data should be updated in every second,5101

maybe this example could be one of your solutions to this problem.
It's a really simple example that you just need two main steps to achieve.
GOOD LUCK!

1. First, build a GridPanel and its datasource.


<ext:GridPanel ID="gdp_MonitorReport" runat="server" StoreID="sto_Monitor"
Icon="Error"
Cls="x-grid-custom"
AutoHeight="true"
Collapsible="true">
<ColumnModel>
<Columns>
<ext:Column DataIndex="monitor_id" Header="monitor_id"/>
<ext:Column DataIndex="monitor_status" Header="monitor_status"/>
<ext:DateColumn DataIndex="monitor_update_time" Header="monitor_update_time" Format="yyyy/MM/dd HH:mm:ss" Width="150"/>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" EnableRowBody="true">
</ext:GridView>
</View>
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
<Filters>
<ext:DateFilter DataIndex="OCCUR_TIME" />
</Filters>
</ext:GridFilters>
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbarSysLog" runat="server" PageSize="20"/>
</BottomBar>
</ext:GridPanel>




<ext:Store ID="sto_Monitor" runat="server">
<Reader>
<ext:JsonReader IDProperty="monitor_id">
<Fields>
<ext:RecordField Name="ID"/>
<ext:RecordField Name="monitor_id" Type="String"/>
<ext:RecordField Name="monitor_status" Type="String"/>
<ext:RecordField Name="monitor_update_time" Type="Date"/>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>


************************************************** *******************
2. you need a timer to refresh data resource (Interval unit is ms: so ...5000 means 5 seconds),
after that, rebind your data resource to your GridPanel.
Update OnEvent="RefreshProgress" , like a trigger calling your predefined function when time's up


<ext:TaskManager ID="TaskManager1" runat="server">
<Tasks>
<ext:Task
TaskID="Task1"
Interval="5000"
AutoRun="true">
<DirectEvents>
<Update OnEvent="RefreshProgress" />
</DirectEvents>
</ext:Task>
</Tasks>
</ext:TaskManager>


You have to reload the GridPanel by YourGridPanelId.Reload()


//code behind
protected void RefreshProgress(object sender, DirectEventArgs e)
{
gdp_ChrgrDailyReport.Reload();
}


The GridPanel will be automatically updated every Time Interval once.
That's ALL!!

Daniil
Nov 21, 2012, 3:04 PM
Hi @mibhpwosiay,

Thank you for sharing! Looks good.

You can even avoid one round trip to a server replacing

<DirectEvents> <Update OnEvent="RefreshProgress" />

</DirectEvents>


with

<Listeners> <Update Handler="sto_Monitor.reload();" />

</Listeners>