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

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);
}

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:

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

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:

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

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!

Leia mais

• CRUD usando ExtJs e ASP NET MVC 3
• Top 10 Posts de 2011
• Formatar data na Ext.grid.GridPanel usando ASP NET MVC
• Criando um formulário com ExtJs e ASP NET MVC 3
• Novidades do Visual Studio 11
• Componentes Telerik para ASP NET MVC
• ASP NET MVC 3 com Entity Framework Code First
• Usando WebImage com ASP NET MVC 3
• Usando WebMail com ASP NET MVC 3
• Usando WebGrid com ASP NET MVC 3