Usando ExtJs GridPanel com ASP NET MVC 3

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..

Download do projeto

Qualquer dúvida, opinião, reclamação mande seu comentário!

Aquele Abraço!