PDA

View Full Version : fasten databind to store



Birgit
Sep 15, 2010, 7:04 AM
Hi,

If a bind 200 records to my store, it takes about 3 seconds. Can you please take a look at the following code, if there's a possibility to fasten the databind.

<code>
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ListRunningUnit.aspx.vb" Inherits="ListRunningUnit" EnableSessionState="True" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Running Units</title>

<script type="text/javascript" src="Scripts/ROOT.js"></script>
<link rel="stylesheet" href="css/list.css" type="text/css" />

<script type="text/javascript">
function prepareDisplayText(value, rec) {
return (rec.CTDOfficialName + ' - ' + rec.CTDAAddressLine1 + ' - ' + rec.CTDACity + ' - ' + rec.CTDACountryCode)
}
</script>

<style type="text/css">
.consignee-list
{
width: 430px;
font: 11px tahoma,arial,helvetica,sans-serif;
}

.consignee-list th {
font-weight: bold;
}

.consignee-list td, .consignee-list th {
padding: 3px;
}

.x-grid3-focus {
width:4px;
height:4px;
background: red !important;
border:1px #a3bae9;
}

.row-booked {
background:#FFFACD;
}
.row-quay {
background:#F0F8FF;
}
.row-permit {
background:#FFB6C1;
}
.row-loaded {
background:#FFEFD5;
}
.row-shipped {
background:#B0FFB9;
}
.row-blocked {
background:#CD5C5C;
}
</style>
</head>
<body>
<form id="frmListUnit" runat="server">
<script type="text/javascript">
function getRowClass(record) {
switch (record.data.UnitStatus) {
case 'BOOKED': { return 'row-booked'; break; }
case 'QUAY': { return 'row-quay'; break; }
case 'PERMIT': { return 'row-permit'; break; }
case 'LOADED': { return 'row-loaded'; break; }
case 'SHIPPED': { return 'row-shipped'; break; }
case 'BLOCKED': { return 'row-blocked'; break; }
};
}
</script>

<ext:ScriptManager ID="ScriptManagerUnit" runat="server" />

<ext:Hidden ID="hiddenSortInfo" Text="UnitForwarder ASC" runat="server"></ext:Hidden>
<ext:Hidden ID="hiddenRowToSelect" Text="0" runat="server"></ext:Hidden>
<ext:Hidden ID="hiddenStoreIsLoading" runat="server" Text="NO" />

<ext:Hidden ID="hiddenFilter" runat="server" Text="" />

<ext:Store ID="StoreUnit" runat="server" AutoLoad="true" OnRefreshData="StoreUnit_Refresh" RemoteSort="true">
<AutoLoadParams>
<ext:Parameter Name="start" Value="={0}" />
<ext:Parameter Name="limit" Value="={20}" />
</AutoLoadParams>
<Proxy>
<ext:DataSourceProxy />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="UnitForwarder" SortType="AsUCString" />
<ext:RecordField Name="UnitChassisNumber" />
<ext:RecordField Name="UnitConstructorDescription" />
<ext:RecordField Name="UnitModelDescription" />
<ext:RecordField Name="UnitTypeCode" />
<ext:RecordField Name="UnitLoadingQuayCode" />
<ext:RecordField Name="UnitDischargePortName" />
<ext:RecordField Name="UnitIsActive" />
<ext:RecordField Name="UnitIsArchived" />
<ext:RecordField Name="UnitInError" />
<ext:RecordField Name="UnitStatus" />
<ext:RecordField Name="ID" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load units failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
<BeforeLoad Handler="#{hiddenStoreIsLoading}.value='YES';" />
<Load Handler="if (this.getTotalCount() > 0) { var index = Math.min(parseInt(#{hiddenRowToSelect}.value), this.getCount()-1);#{GridPanelUnit}.getView().focusRow(index); #{hiddenRowToSelect}.value='0';}; #{hiddenStoreIsLoading}.value='NO';" Delay="100" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreForwarder" runat="server" OnRefreshData="StoreForwarder_Refresh">
<SortInfo Field="CTDOfficialName" Direction="ASC" />
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="CTDOfficialName" SortType="AsUCString" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load forwarders failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreConstructor" runat="server" OnRefreshData="StoreConstructor_Refresh" >
<SortInfo Field="UnitConstructorDescription" Direction="ASC" />
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="UnitConstructorCode" />
<ext:RecordField Name="UnitConstructorDescription" SortType="AsUCString" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load constructors failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreModel" runat="server" OnRefreshData="StoreModel_Refresh">
<SortInfo Field="UnitModelDescription" Direction="ASC" />
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="UnitModelCode" />
<ext:RecordField Name="UnitModelDescription" SortType="AsUCString" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load models failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreLoadingQuay" runat="server" OnRefreshData="StoreLoadingQuay_Refresh">
<SortInfo Field="LoadingQuayCode" Direction="ASC" />
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="LoadingQuayCode" SortType="AsUCString" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load quays failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreDischargePort" runat="server" OnRefreshData="StoreDischargePort_Refresh">
<SortInfo Field="DischargePortName" Direction="ASC" />
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="DischargePortName" SortType="AsUCString" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load discharge ports failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreUpdateForwarder" runat="server">
<SortInfo Field="CTDOfficialName" Direction="ASC" />
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="CTDOfficialName" SortType="AsUCString" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load forwarders failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreUpdateShipper" runat="server">
<SortInfo Field="CTDOfficialName" Direction="ASC" />
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="CTDOfficialName" SortType="AsUCString" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load shippers failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreUpdateConsignee" runat="server">
<Reader>
<ext:JsonReader ReaderID="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="CTDOfficialName" />
<ext:RecordField Name="CTDAAddressLine1" />
<ext:RecordField Name="CTDACity" />
<ext:RecordField Name="CTDACountryCode" />
<ext:RecordField Name="CTDACountryName" />
<ext:RecordField Name="DisplayText">
<Convert Fn="prepareDisplayText" />
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Load consignees failed', (!Ext.isEmpty(e) && !Ext.isEmpty(e.message)) ? e.message : response.statusText);" />
</Listeners>
</ext:Store>

<ext:ViewPort ID="ViewPortUnit" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayoutUnit" runat="server">
<Center>
<ext:Panel ID="PanelUnit" runat="server" Title="Running Units" IconCls="panelUnit" Border="false">
<Body>
<ext:FitLayout ID="FitLayoutUnit" runat="server">
<ext:GridPanel runat="server" ID="GridPanelUnit" StoreID="StoreUnit" AutoExpandColumn="UnitForwarder" Border="false" >
<TopBar>
<ext:Toolbar ID="ToolbarUnit" runat="server">
<Items>
<ext:ToolbarButton runat="server" ID="btnAddUnit" IconCls="toolbar_button_new_normal" Text="New" >
<Listeners>
<Click Handler="Coolite.AjaxMethods.AddUnit();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="TooltipAddUnit" runat="server" Html="Add New" />
</ToolTips>
</ext:ToolbarButton>
<ext:ToolbarSeparator />
<ext:ToolbarSpacer Width="30" />
<ext:Label ID="lblUpdateLabel" runat="server" Text="Update Field:" />
<ext:ToolbarSpacer Width="10" />
<ext:ComboBox ID="cboUpdateEntity" runat="server" Width="130">
<Items>
<ext:ListItem Value="" Text="" />
<ext:ListItem Value="APPROVE" Text="Approve documents" />
<ext:ListItem Value="BLOCK" Text="Block Unit" />
<ext:ListItem Value="COLLECT" Text="Collect Amount" />
<ext:ListItem Value="CGN" Text="Consignee" />
<ext:ListItem Value="CREDIT" Text="Credit" />
<ext:ListItem Value="FWDR" Text="Forwarder" />
<ext:ListItem Value="INSURANCE" Text="Insurance" />
<ext:ListItem Value="PIP" Text="PIP By IIIKing" />
<ext:ListItem Value="PREPAID" Text="Is Prepaid" />
<ext:ListItem Value="ROAD" Text="Road Transport" />
<ext:ListItem Value="SHP" Text="Shipper" />
<ext:ListItem Value="WAIVER" Text="Waiver By IIIKing" />
</Items>
<Listeners>
<Select Handler="Coolite.AjaxMethods.cboUpdateEntity_ValueChanged() ;" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSpacer Width="5" />
<ext:Checkbox ID="chkUpdateCheckField" runat="server" Hidden="true" Checked="false"/>
<ext:NumberField ID="txtUpdateNumberField" runat="server" AllowDecimals="true" DecimalPrecision="3" Width="70" Hidden="true"/>
<ext:ToolbarSpacer Width="2" />
<ext:ComboBox ID="cboUpdateNumberCurrency" runat="server" Width="55" Hidden="true" />
<ext:ComboBox ID="cboUpdateComboboxFieldForwarder" runat="server"
Mode="Local"
Hidden="true"
Width="250"
StoreID="StoreUpdateForwarder"
DisplayField="CTDOfficialName"
ValueField="ID" >
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
</ext:ComboBox>
<ext:ComboBox ID="cboUpdateComboboxFieldShipper" runat="server"
Mode="Local"
Hidden="true"
Width="250"
StoreID="StoreUpdateShipper"
DisplayField="CTDOfficialName"
ValueField="ID" >
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
</ext:ComboBox>
<ext:ComboBox ID="cboUpdateComboboxFieldConsignee" runat="server"
Mode="Local"
Hidden="true"
Width="430"
StoreID="StoreUpdateConsignee"
DisplayField="DisplayText"
ValueField="ID"
Editable="true"
ItemSelector="tr.list-item" >
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
<tpl if="[xindex] == 1">
<table class="consignee-list">
<tr>
<th>Company</th>
<th>Address</th>
<th>City</th>
<th>Country</th>
</tr>
</tpl>
<tr class="list-item">
<td style="padding:3px 0px;">{CTDOfficialName}</td>
<td>{CTDAAddressLine1}</td>
<td>{CTDACity}</td>
<td>{CTDACountryCode}</td>
</tr>
<tpl if="[xcount-xindex]==0">
</table>
</tpl>
</tpl>
</Html>
</Template>
</ext:ComboBox>
<ext:ToolbarSpacer Width="5" />
<ext:ToolbarButton ID="btnUpdateButton" runat="server" Icon="Accept">
<Listeners>
<Click Handler="if(#{GridPanelUnit}.getSelectionModel().hasSelecti on()) {Ext.Msg.confirm('Update Rows', 'Are you sure u want to update the selected unit(s)?', function(btn) {
if (btn == 'yes') {
Coolite.AjaxMethods.UpdateSelectedUnits({eventMask : {showMask: true, msg: 'Updating...'}});
}})}else{alert('You need to select at least one unit.');};" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip4" runat="server" Html="Update" />
</ToolTips>
</ext:ToolbarButton>
<ext:ToolbarFill />
<ext:ToolbarSeparator />
<ext:ToolbarButton runat="server" ID="btnHelp" Icon="Help" >
<Listeners>
<Click Handler="if (#{StoreUnit}.getTotalCount() > 0) { var index = Math.min(parseInt(#{hiddenRowToSelect}.value), #{StoreUnit}.getCount()-1);#{GridPanelUnit}.getView().focusRow(index); #{GridPanelUnit}.getSelectionModel().selectRow(ind ex); #{hiddenRowToSelect}.value='0';};Coolite.AjaxMetho ds.ShowHelp();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="TooltipHelp" runat="server" Html="Help" />
</ToolTips>
</ext:ToolbarButton>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModelUnit" runat="server">
<Columns>
<ext:Column DataIndex="UnitForwarder" ColumnID="UnitForwarder" Sortable="true" Header="Forwarder" />
<ext:Column DataIndex="UnitChassisNumber" Sortable="true" Header="Chassis / VIN" Width="130" />
<ext:Column DataIndex="UnitConstructorDescription" Sortable="true" Header="Constructor" />
<ext:Column DataIndex="UnitModelDescription" Sortable="true" Header="Model" Width="150" />
<ext:Column DataIndex="UnitLoadingQuayCode" Sortable="true" Header="Loading Quay" />
<ext:Column DataIndex="UnitDischargePortName" Sortable="true" Header="Discharge Port" Width="150" />
<ext:CheckColumn DataIndex="UnitIsActive" Sortable="false" Header="Active" Width="45" />
<ext:ImageCommandColumn Width="30">
<Commands>
<ext:ImageCommand CommandName="Edit" Icon="NoteEdit">
<ToolTip Text="Edit" />
</ext:ImageCommand>
</Commands>
</ext:ImageCommandColumn>
<ext:ImageCommandColumn Width="30">
<Commands>
<ext:ImageCommand Icon="Delete" CommandName="Delete">
<ToolTip Text="Delete" />
</ext:ImageCommand>
</Commands>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel" runat="server" CheckOnly="true" SingleSelect="false" />
</SelectionModel>
<View>
<ext:GridView ID="GridViewUnit" runat="server" >
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn>
<Component />
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:ComboBox ID="ForwarderFilter" runat="server"
StoreID="StoreForwarder"
ValueField="ID"
DisplayField="CTDOfficialName"
Mode="Local"
>
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
</ext:ComboBox>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="ChassisFilter" runat="server" />
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:ComboBox ID="ConstructorFilter" runat="server"
StoreID="StoreConstructor"
ValueField="ID"
DisplayField="UnitConstructorDescription"
Mode="Local"
>
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
</ext:ComboBox>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:ComboBox ID="ModelFilter" runat="server"
StoreID="StoreModel"
ValueField="ID"
DisplayField="UnitModelDescription"
Mode="Local"
>
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
</ext:ComboBox>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:ComboBox ID="LoadingQuayFilter" runat="server"
StoreID="StoreLoadingQuay"
ValueField="ID"
DisplayField="LoadingQuayCode"
Mode="Local"
>
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
</ext:ComboBox>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:ComboBox ID="DischargePortFilter" runat="server"
StoreID="StoreDischargePort"
ValueField="ID"
DisplayField="DischargePortName"
Mode="Local"
>
<Items>
<ext:ListItem Text="" Value="-1" />
</Items>
</ext:ComboBox>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="check-center">
<Component>
<ext:Checkbox id="ActiveFilter" runat="server" Width="20" Checked="true" />
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false" Cls="check-center">
<Component>
<ext:Button ID="ApplyFilterButton" runat="server" Icon="Accept" >
<ToolTips>
<ext:ToolTip ID="ToolTip2" runat="server" Html="Apply filter" />
</ToolTips>
<Listeners>
<Click Handler="Coolite.AjaxMethods.ApplyFilter();" />
</Listeners>
</ext:Button>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false">
<Component>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel" >
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="Coolite.AjaxMethods.ClearFilter();" />
</Listeners>
</ext:Button>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
<Listeners>
<RowDblClick Handler="Coolite.AjaxMethods.EditUnit();" />
<Command Handler="switch(command){
case 'Edit': {Coolite.AjaxMethods.EditUnit(record.data.ID, record.data.UnitIsArchived);break;}
case 'Delete': {Ext.Msg.confirm('Delete Rows', 'Are you sure u want to delete this unit?', function(btn) {
if (btn == 'yes') {
Coolite.AjaxMethods.DeleteUnit(record.data.ID);
}
GridPanelUnit.view.focusEl.focus();
});break;}
};" />
</Listeners>
<BottomBar>
<ext:PagingToolBar ID="PagingToolBarUnit"
runat="server"
PageSize="20"
StoreID="StoreUnit"
DisplayInfo="true"
DisplayMsg="Displaying units {0} - {1} of {2}"
EmptyMsg="No units to display" >
<Items>
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" />
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:ComboBox ID="cboRecordsPerPage" runat="server"
Title="Records per page"
Width="120"
Editable="false">
<Items>
<ext:ListItem Text="15" Value="15" />
<ext:ListItem Text="20" Value="20" />
<ext:ListItem Text="50" Value="50" />
<ext:ListItem Text="100" Value="100" />
<ext:ListItem Text="200" Value="200" />
</Items>
<SelectedItem Text="20" Value="20" />
<Listeners>
<Select Handler="Coolite.AjaxMethods.ChangeRecordsPerPage();" />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSpacer Width="30" />
<ext:SplitButton ID="btnLegend" runat="server" Text="Status Legend">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem ID="MenuItem3" runat="server" Text="NEW" />
<ext:MenuItem ID="MenuItem4" runat="server" Text="BOOKED" Cls="row-booked" />
<ext:MenuItem ID="MenuItem5" runat="server" Text="QUAY" Cls="row-quay" />
<ext:MenuItem ID="MenuItem6" runat="server" Text="PERMIT" Cls="row-permit" />
<ext:MenuItem ID="MenuItem7" runat="server" Text="LOADED" Cls="row-loaded" />
<ext:MenuItem ID="MenuItem8" runat="server" Text="SHIPPED" Cls="row-shipped" />
<ext:MenuItem ID="MenuItem9" runat="server" Text="BLOCKED" Cls="row-blocked" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
</Items>
</ext:PagingToolBar>
</BottomBar>
<KeyMap>
<ext:KeyBinding>
<Keys>
<ext:Key Code="LEFT" />
</Keys>
<Listeners>
<Event Handler="if (#{hiddenStoreIsLoading}.value=='NO' && #{PagingToolbarUnit}.activePageField.value-1 > 0) {#{PagingToolbarUnit}.changePage(#{PagingToolbarUn it}.activePageField.value-1);};" />
</Listeners>
</ext:KeyBinding>
<ext:KeyBinding>
<Keys>
<ext:Key Code="RIGHT" />
</Keys>
<Listeners>
<Event Handler="if (#{hiddenStoreIsLoading}.value=='NO' && #{PagingToolBarUnit}.activePageField.value+1 < #{PagingToolBarUnit}.getPageData().pages+1 ) {#{PagingToolBarUnit}.changePage(#{PagingToolBarUn it}.activePageField.value+1);};" />
</Listeners>
</ext:KeyBinding>
</KeyMap>
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>

</form>
</body>
</html>
</code>