PDA

View Full Version : [CLOSED] GridPanel PagingToolbar Navigation Problem



supera
Jan 20, 2012, 7:34 PM
I has a gridPanel called grdSugestoes in my aspx page. See the code of my gridPanel for details with Store, PagingToolbar, etc... just below in the thread...

The store call a WebService, and this WebService returns a paging records, follow this exemple
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/JSON_WebService/

So my grid is started with 5 records oft 345... its working fine
3749

I move to last page... it´s working fine too...
3750

When I change a pagesize to 20 in combobox (I inserted a combobox follow this exemple http://examples2.ext.net/#/GridPanel/ArrayGrid/ArrayWithPaging/), no records are returned...

Where am I wrong? is there anything I can do for this paging function properly?



<ext:GridPanel runat="server" ID="grdSugestoes" Title="Sugestões" Frame="true" Layout="FitLayout" IconCls="icon-sugestoes" ButtonAlign="Right" Flex="3">
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="true" PageSize="10">
<Proxy>
<ext:AjaxProxy Json="true" Url="~/App/JSonDataPaging.asmx/Sugestoes_DAL">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="d.Data" TotalProperty="d.TotalRecords" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="10" Mode="Raw" />
</AutoLoadParams>
<Parameters>
<ext:StoreParameter Name="filter" Value="getFilter()" Mode="Raw" />
</Parameters>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IDSugestao" />
<ext:ModelField Name="Data" Type="Date" DateFormat="M$" />
<ext:ModelField Name="Descricao" />
<ext:ModelField Name="Tipo" />
<ext:ModelField Name="IDStatusDesenvolvimento_Descricao" />
<ext:ModelField Name="Situacao" />
<ext:ModelField Name="Solicitante" />
<ext:ModelField Name="SolicitanteEmail" />
<ext:ModelField Name="IDCronograma_Descricao" />
<ext:ModelField Name="DataSolucao" Type="Date" DateFormat="M$"/>
<ext:ModelField Name="Solucao" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="IDSugestao" Direction="DESC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column
runat="server"
ColumnID="Details"
Header=""
DataIndex=""
Width="30"
Align="Center"
Fixed="true"
MenuDisabled="true"
Resizable="false">
<Renderer Fn="sugestaoDetailsRender"/>
</ext:Column>
<ext:Column runat="server" Text="ID" DataIndex="IDSugestao" Width="75px" Sortable="true" />
<ext:DateColumn runat="server" Text="Data" DataIndex="Data" Width="75px" Sortable="true" Format="dd/MM/yyyy" />
<ext:Column runat="server" Text="Descrição" DataIndex="Descricao" Width="300px" Sortable="true" />
<ext:Column runat="server" Text="Tipo" DataIndex="Tipo" Width="100px" Sortable="true" />
<ext:Column runat="server" Text="Status do Desenvolvimento" DataIndex="IDStatusDesenvolvimento_Descricao" Width="150px" Sortable="true" />
<ext:Column runat="server" Text="Situação" DataIndex="Situacao" Width="100px" Sortable="true" />
<ext:Column runat="server" Text="Solicitante" DataIndex="Solicitante" Width="100px" Sortable="true" />
<ext:Column runat="server" Text="E-mail do Solicitante" DataIndex="SolicitanteEmail" Width="120px" Sortable="true" />
<ext:Column runat="server" Text="Cronograma" DataIndex="IDCronograma_Descricao" Width="120px" Sortable="true" />
<ext:DateColumn runat="server" Text="Corrigido em" DataIndex="DataSolucao" Width="75px" Format="dd/MM/yyyy" Sortable="true" />
<ext:Column runat="server" Text="Solução" DataIndex="Solucao" Width="300px" Sortable="true" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" mode="Single" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="tbPagingSugestoes" runat="server" DisplayInfo="true"
DisplayMsg="Exibindo sugestões {0} - {1} of {2}" EmptyMsg="Sem sugestões para exibição">
<Items>
<ext:Label ID="Label1" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ComboBox ID="cmbPageSize" runat="server" Width="80">
<Items>
<ext:ListItem Text="5" />
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
<ext:ListItem Text="30" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" />
</SelectedItems>
<Listeners>
<Select Handler="#{grdSugestoes}.store.pageSize = parseInt(this.getValue(), 10); #{grdSugestoes}.store.load();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
<Listeners>
<CellClick Fn="cellClick" />
<CellDblClick/>
</Listeners>
<DirectEvents>
<CellClick
OnEvent="ShowDetails"
Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
</CellClick>
<CellDblClick
OnEvent="ShowDetails"
Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
</CellDblClick>
</DirectEvents>
<Buttons>
<ext:Button runat="server" ID="btnAdd" Icon="ApplicationAdd" Text="Adicionar">
<DirectEvents>
<Click OnEvent="AddSugestao"
Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
</Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" ID="btnDetails" Icon="ApplicationEdit" Text="Detalhar">
<DirectEvents>
<Click OnEvent="ShowDetails"
Failure="Ext.MessageBox.alert('Load failed', 'Error during ajax event!');">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{grdSugestoes}.body}" />
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:GridPanel>

Daniil
Jan 20, 2012, 9:25 PM
Hi,

I think it's also required to change the limit parameter.

Please try to replace:

<ext:Parameter Name="limit" Value="10" Mode="Raw" />

with



<ext:XScript runat="server">
<script type="text/javascript">
var getLimit = function () {
var limit,
combo = #{cmbPageSize};
if (combo) {
limit = parseInt(combo.getValue(), 10);
}

return limit || 10;
};
</script>
</ext:XScript>

...

<ext:Parameter Name="limit" Value="getLimit()" Mode="Raw" />

supera
Jan 23, 2012, 10:58 AM
Hi Daniil...thank you for your response...

Your code works fine...

But de navigation problem remains...

I realized that de problem is in the Start parameter...

When pagesize is 10 and I move to last page, the Start parameter is filled with number 340 (there are 345 records in my query)...
When I change a pagesize (cmbPageSize) to 30, the Start parameter is filled with number 2040...

I need set Start parameter to 0 when I change a cmbPageSize SelectItem...

I´m sorry about my dificult in resolve this problem for myself... I do not know how to access the Start parameter in the grid ...

can you help me?

Daniil
Jan 23, 2012, 11:05 AM
You can deal with the start parameter the same way that I deal with the limit parameter.

Set up a function named, for example, "getStart" and return a required value.

supera
Jan 23, 2012, 11:41 AM
Hi Daniil...

Sorry, but I must have done something wrong...

I insert a line with command alert('limit') in script function getLimit() and a line with command alert('start') in getStart() function...

This script functions are fired when the page load only..

I need fired this script functions (and change de start and limit parameter values) when the combo cmbPageSize is changed...

What am I doing wrong?

Thanks for any help...

Daniil
Jan 23, 2012, 1:39 PM
Please use:

store.proxy.setExtraParam("start", 0);
or

store.load({
params : {
start : 0
}
});

Here is the full example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
public List<object> MyData = new List<object>
{
new { test = "test1" },
new { test = "test2" },
new { test = "test3" },
new { test = "test4" },
new { test = "test5" },
new { test = "test6" },
new { test = "test7" },
new { test = "test8" },
new { test = "test9" }
};

protected void Store_ReadData(object sender, StoreRefreshDataEventArgs e)
{
List<object> data = this.MyData;
var limit = e.Limit;
if ((e.Start + e.Limit) > data.Count)
{
limit = data.Count - e.Start;
}
List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
e.Total = data.Count;
(sender as Store).DataSource = rangeData;
}
</script>

<!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 runat="server">
<title>Ext.NET Example</title>

<script type="text/javascript">
var onSelect = function (combo, grid) {
var store = grid.getStore();
store.pageSize = parseInt(combo.getValue(), 10);
store.load({
params : {
start : 0
}
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server" OnReadData="Store_ReadData" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar runat="server">
<Items>
<ext:Label runat="server" Text="Page size:" />
<ext:ToolbarSpacer runat="server" Width="10" />
<ext:ComboBox runat="server" Width="80">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="3" />
<ext:ListItem Text="9" />
</Items>
<SelectedItems>
<ext:ListItem Text="3" />
</SelectedItems>
<Listeners>
<Select Handler="onSelect(this, #{GridPanel1});" />
</Listeners>
</ext:ComboBox>
</Items>
<Plugins>
<ext:ProgressBarPager runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>

supera
Jan 23, 2012, 3:49 PM
Solved!!!

Thanks a lot, Daniil