Continuando nossos estudos sobre ExtJs hoje vamos criar uma Grid com paginação, sem enrolação vamos ao código!
Vou estar usando o mesmo projeto do post passado, ja que o ExtJs já está configurado no projeto.
Parte 1 – Server C#
Primeiramente em nosso controller PessoaController, vamos criar uma nova action chamada GetAll conforme abaixo
[sourcecode language=”csharp”]
public JsonResult GetAll(int start, int limit)
{
IList lst = new List();
for (int i = 1; i < 65; i++)
{
PessoaModel pessoaModel = new PessoaModel();
pessoaModel.Id = i;
pessoaModel.Company = "Company – " + i.ToString();
pessoaModel.Email = "Email – " + i.ToString();
pessoaModel.First = "First – " + i.ToString();
pessoaModel.Last = "Last – " + i.ToString();
lst.Add(pessoaModel);
}
int total = lst.Count;
lst = lst.Skip(start).Take(limit).ToList();
return Json(new { pessoas = lst, total = total }, JsonRequestBehavior.AllowGet);
}
[/sourcecode]
Explicando o código
Linha 1: Recebemos como parâmetro o registro de início e a quantidade de registros por página que a grid exibirá, o retorno da action é um objeto do tipo JsonResult
Linha 3: Criamos a lista de retorno
Linha 5: Criamos um for somente para criar manualmente as pessoa, aqui você pode recuperar do banco de dados
Linha 16: Quardamos o total de registros
Linha 17: Fazemos a paginação usando LINQ
Linha 19: Retornamos uma lista de objetos e o total de registros como Json
Parte 2 – Cliente ExtJs
Para usar uma GridPanel do ExtJs primeiramente temos que criar um store, que é o local onde as informações ficaram armazenadas em tempo de execusão, veja abaixo:
[sourcecode language=”csharp”]
<script type="text/javascript">
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
url: ‘@Url.Content("~/Pessoa/GetAll")’,
root: ‘pessoas’,
totalProperty: ‘total’,
fields: [‘Id’, ‘Company’, ‘Email’, ‘First’, ‘Last’]
});
store.setDefaultSort(‘Id’, ‘asc’);
store.load({ params: { start: 0, limit: 15} });
});
</script>
[/sourcecode]
Explicando o código
Linha 3: Todos os componentes do Ext tem que ficar dentro da função onReady
Linha 5: Criamos um objeto do tipo Ext.data.JsonStore que será responsável por guardar as informações em memória
Linha 6: Action que carrega a lista
Linha 7: Campo inicial do Json, veja que é o mesmo nome que colocamos no retorno do método GetAll
Linha 8: Campo que guarda o total de registros também é o mesmo nome que colocamos no retorno do método GetAll
Linha 9: São os campos que será mostrado na grid
Linha 12: Definimos a ordenação padrão, nesse caso pelo campo Id e Ascedente
Linha 14: Carregamos o store passando os dois parâmetros necessário
Agora vamos adicionar o código responsável por criar a Grid, veja abaixo:
[sourcecode language=”csharp”]
<script type="text/javascript">
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
url: ‘@Url.Content("~/Pessoa/GetAll")’,
root: ‘pessoas’,
totalProperty: ‘total’,
fields: [‘Id’, ‘Company’, ‘Email’, ‘First’, ‘Last’]
});
store.setDefaultSort(‘Id’, ‘asc’);
store.load({ params: { start: 0, limit: 15} });
var grid = new Ext.grid.GridPanel({
width: 700,
height: 395,
title: ‘List People’,
store: store,
stripeRows: true,
// grid columns
columns: [{
id: ‘id’,
header: "Id",
dataIndex: ‘Id’,
width: 50,
sortable: true
}, {
id: ‘company’,
header: "Company",
dataIndex: ‘Company’,
width: 160,
sortable: true
}, {
id: "email",
header: "Email",
dataIndex: ‘Email’,
width: 160,
sortable: true
}, {
id: ‘first’,
header: "First",
dataIndex: ‘First’,
width: 160,
sortable: true
}, {
id: ‘last’,
header: "Last",
dataIndex: ‘Last’,
width: 165,
sortable: true
}],
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: store,
displayInfo: true,
displayMsg: ‘Displaying topics {0} – {1} of {2}’,
emptyMsg: "No topics to display"
})
});
grid.render(‘grid’);
});
</script>
[/sourcecode]
Explicando o código
Linha 16: Criamos um objeto do tipo Ext.grid.GridPanel
Linha 17: Largura da grid
Linha 18: Altura da grid
Linha 19: Título da grid
Linha 20: Setamos que a grid vai carregar nosso store, criando anteriormente
Linha 21: Deixa a grid com linhas “zebradas”
Linha 23: Criamos as colunas
Linha 24: Id dacoluna
Linha 25: Título da coluna que será visto pelo usuário
Linha 26: Nome do campo para exibir, esse nome deve ser o mesmo do store
Linha 27: Tamanho da coluna
Linha 28: Define se a coluna poderá ser ordenada
Linha 54: Criamos uma Tool Bar para a paginação
Linha 55: Quantidade de registros que será renderizado por página
Linha 56: Setamos o nosso store, criando anteriormente
Linha 57: Será informado quais registros estão sendo visualizados
Linha 58: Informaçã dos registros atuais
Linha 59: Caso a grid não retorne nenhuma informação será mostrado uma mensagem
Linha 63: Renderizamos nossa grid em uma div com o id=grid
Agora é só executar o projeto e ver o resultado
Conclusão
Podemos ver que a codificação segue a mesma linha, o legal dessa grid é as inumeras funcionalidades que ja vem pronta, como tirar e adicionar colunas, ordenação asc ou desc, poder alterar a ordem das colunas, etc..
Qualquer dúvida, opinião, reclamação mande seu comentário!
Aquele Abraço!
Caro, Leandro
Você conhece o framework Ext.Net MVC que trabalha com o ExtJs de forma mais produtiva ? Você já publicou algum post a respeito ?
Abraço.
Eliézer,
O ExtJS MVC é a nova versão do framework (versão 4) mas ainda não cheguei a ver nada dessa nova versão (falta de tempo)
Nessa versão eles adicionaram o padrão MVC (Model View Controller) não posso afirmar apra vc que vai ficar mais produtivo
Um abraço
att,.
Leandro Prado
Thank you for your effort, its really helping me
Olá leandro meu nome é Marcelo,Estou querendo fazer uma aplicação em asp.net e EXT Só que só acho tutoriais de asp.net MVC e não manjo nada!!
Gostaria de saber se poderia me dar uma força em um tutorial ou uma vídeo aula!
Por favor preciso com urgência
Leandro tentei implementar o seu tutorial porem estou tendo alguns problemas…
criei o controller e a view… so que não consigo visualizar o grid o retorno quando abre a pagina é esse {“total”:3,”data”:[{“Key”:”01″,”Value”:”João”},{“Key”:”02″,”Value”:”José”},{“Key”:”03″,”Value”:”Maria”}]}…
Felipe,
Qual erro q está retornando? Instala o Firebug e veja os logs
att,
Lenadro Prado
Bom Dia Leandro,
Eu estou aprendendo a programar e gostaria de uma informação se teria como implementar um ” If ” dentro desse script e como poderia fazer? pois tentei de uma forma aqui, mais ai ele não cria as tabelas.