Ir para conteúdo


Foto

Problemas com Paging e Gridfilters

Paging Gridfilters

  • Por favor, faça o login para responder
1 resposta neste tópico

#1 nelsonlucas

nelsonlucas

    Iniciante

  • Membros
  • Pip
  • 1 posts

Postado 15 September 2017 - 23:39

Bom dia pessoal,

Estou iniciando no mundo do extjs, porem me deparei com um problema que não consigo resolver de forma alguma.

 

Criei um grid com recurso de paginação, e um plugin de gridfilters (aquele que vc consegue filtra por colunas).

 

Porem, este plugin só pesquisa na primeira pagina do grid, ou seja, se eu pesquisar um item que esta na ultima pagina do grid, ele não encontra.

 

Outro fato interessante é que,  se eu navegar ate esta pagina e pesquisar pelo gridfilter, o danado encontra.

 

Ext.onReady(function () {        
 
        //var QtdItensPorPagina = 25;
 
        //store cliente
        var store_client = new Ext.data.JsonStore({
 
            autoLoad: { start: 0, limit: 20 },            
            fields: [
                        { name: 'codcli' },
                        { name: 'nomfan' },
                        { name: 'razsoc' },
                        { name: 'tipcli' },
                        { name: 'insest' },
                        { name: 'insmun' },
                        { name: 'cgccpf' },
                        { name: 'cepcid' },
                        { name: 'endcli' },
                        { name: 'numend' },
                        { name: 'cplend' },
                        { name: 'nombai' },
                        { name: 'nomcid' },
                        { name: 'desufs' },
                        { name: 'foncli1' },
                        { name: 'foncli2' },
                        { name: 'foncli3' },
                        { name: 'foncli4' },
                        { name: 'emacli' },
                        { name: 'datcad', type: 'date', dateFormat: 'MS' },
                        { name: 'datalt', type: 'date', dateFormat: 'MS' },
                        { name: 'codsit' },
                        { name: 'codusu' }
            ],
            proxy: {
                enablePaging: true,
                type: 'ajax',
                url: '@Url.Action("GetAll", "Cliente")',
                reader: {
                    type: 'json',
                    rootProperty: 'result',
                    totalProperty: 'total'
                },
                sorters: {
                    property: 'codcli',
                    direction: 'ASC'
                }
            }
        });
 
 
        //grid
        var grid = new Ext.grid.GridPanel({
            width: '100%',
            height: 500,
            title: 'Cliente',
            store: store_client,
            plugins: ['gridfilters'],          
            stripeRows: true,
            columns: [{
                header: 'Código',
                dataIndex: 'codcli',
                width: 70
            }, {
                header: 'Razão Social',
                dataIndex: 'razsoc',
                width: 200,
                sortable: true,
                filter: {
                    type: 'string',
                    val:'nelson'
                }
            }, {
                header: 'Nome Fantasia',
                dataIndex: 'nomfan',
                width: 200
            }, {
                header: 'Email',
                dataIndex: 'emacli',
                width: 200
            }, {
                xtype: 'datecolumn',
                format: 'd/m/Y H:m',
                header: 'Data Cadastro',
                dataIndex: 'datcad',
                width: 150
            }, {
                xtype: 'actioncolumn',
                width: 85,
                items: [{
                    iconCls: 'icon-key',
                    tooltip: 'Alterar Senha',
                    handler: function (grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        //alterarSenha(rec.get('codusu'));
                    }
                }, '->', {
 
                    iconCls: 'icon-edit',
                    tooltip: 'Editar',
                    handler: function (grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        //editar(rec.get('codusu'));
                    }
                }, '->', {
 
                    iconCls: 'icon-del',
                    tooltip: 'Excluir',
                    handler: function (grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        //excluir(rec.get('codusu'));
                    }
                }]
            }
            ],
 
            //cabecalho
            tbar: [{
                text: 'Novo',
                iconCls: 'btn-add',
                scope: this,
                handler: function (button, e) {
 
                    //Defino uma propriedade na janela do form pra indicar que estamos abrindo-a
                    //para editar um registro e assim poder definir o que fazer na hora de salvar
                    //winForm.update = false;
 
                    //Aqui altero o titulo pegando aquele titulo salvo acima e adicionando um texto
                    //indicando que ação estamos executando
                    //winForm.setTitle(formTitle + ' [Inserindo]');
 
                    //Mostramos a janela
                    //winForm.show();
 
                    //Limpo o formulário para iniciar a inserção de um novo registro
                    //formulario.getForm().reset();
                }
            }],
 
            //rodape paginação
            bbar: new Ext.PagingToolbar({
                pageSize: 20,
                store: store_client,
                displayInfo: true
            })
        });
 
        //renderiza na pagina
        grid.render('grid');
    });


#2 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 836 posts
  • LocationGoiânia - GO

Postado 16 September 2017 - 02:21

Esse comportamento é normal,  Não vai encontrar pois os dados não foram carregados ainda no seu store, devido a sua paginação e seu backend só fez select em 20 registros. Para resolver isso você precisa especificar a propriedade de configuração remoteFilter : true no seu store, sendo assim toda vez que você filtrar ele vai mandar uma requisição para seu server com os paramentros pra vc fazer o select/where necessário. Você terá que implementar isso no backend.

 

 

http://docs.sencha.c...fg-remoteFilter


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!






Tópicos que também usam as tags Paging, Gridfilters:

0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos