Paginação com EXT JS e JSON

14 respostas
P

Olá pessoal estou dando uma estudada nessa grid do EXT, e estou apanhando no seguinte exemplo:

paging.js

/
Ext.onReady(function(){

    // create the Data Store
    //pega dados via JSON
    var store = new Ext.data.JsonStore({
        //lista
        root: 'users', 
        //total de registros
        totalProperty: 20,
        //id da lista
        idProperty: 'id',
        remoteSort: true,

        fields: [
            'id', 'name','login'
        ],

        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.ScriptTagProxy({
            //url: 'http://extjs.com/forum/topics-browse-remote.php'
            url: 'http://localhost:8080/dvd/user.list.ajax.logic'
        })
    });
    //campo para ordenação default
    store.setDefaultSort('login', 'desc');



    var pagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        displayInfo: true,
        displayMsg: 'Exibindo Usuários {0} - {1} of {2}',
        emptyMsg: "Não existe usuários cadastrados",
        
        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:700,
        height:300,
        title:'Exemplo Paginação Grid',
        store: store,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            //id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "ID",
            dataIndex: 'id',
            width: 200,
            //renderer: renderTopic,
            sortable: true
        },{
            header: "Name",
            dataIndex: 'name',
            width: 200,
            align: 'right',
            sortable: true
        },{
            //id: 'last',
            header: "Login",
            dataIndex: 'login',
            width: 300,
            //renderer: renderLast,
            sortable: true
        }]

        // paging bar on the bottom
        bbar: pagingBar
    });

    // render it
    grid.render();

    // trigger the data store load
    store.load({params:{start:0, limit:25}});
});



/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});

E meu objeto JSON chega dessa forma:

{"users":[
 	{
 	"dvds":null,
 	"id":1,
 	"login":"fabio.pedrosa",
 	"name":"Fabio Pedrosa",
 	"password":null
 	},
	{
	"dvds":null,
	"id":2,
	"login":"teste",
	"name":"Teste",
	"password":null
	}
	]
}

E estranho que no JSON que vem no exemplo no site do EXT ele carrega dessa forma:

{"totalCount":"47865",
	"topics":[
	{
	       "threadid":"58073",
	       "forumid":"9",
	       "forumtitle":"Ext: Help",
	       "title":"Can I use one store and filter it differently for two different views?",
	       "author":"tapani108",
	       "lastposter":"Condor",
	       "lastpost":"[telefone removido]",
	       "excerpt":"Hello, \n\nI am attempting to create one JSON store, simplified below:\n\nvar downloadQueueAllItems= new Ext.data.JsonStore({\n\n root: 'downloadQueue',\n fields: ['DownloadId', 'ElementId', 'CurMainStatus'],\n data: { downloadQueue: [\n{ \"DownloadId\": 1,\n \"ElementId\": 113...",
	       "replycount":"4"
       },
       ]
}

Note que retorna varios campos mas usa somente alguns:

O totalCount é o unico que ele carrega de forma diferente e que esta fora da lista de topics

"totalCount":"47865"

Com o meu JSON ele apresenta a seguinte mensagem de erro no firebug Invalid Label, e se aponto para a url do site deles funciona corretamente com as proriedades corretas.

Alterei o nome da lista na propriedade e no totalProperty joguei 20 fixo pois não retorno essa propriedade fora da lista:

var store = new Ext.data.JsonStore({
        //lista
        root: 'users', 
        //total de registros
        totalProperty: 20,
        //id da lista
        idProperty: 'id',
        remoteSort: true,

Troquei os campos da grid de acordo com o meu JSON na propriedade dataIndex

columns:[{
            //id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "ID",
            dataIndex: 'id',
            width: 200,
            //renderer: renderTopic,
            sortable: true
        },{
            header: "Name",
            dataIndex: 'name',
            width: 200,
            align: 'right',
            sortable: true
        },{
            //id: 'last',
            header: "Login",
            dataIndex: 'login',
            width: 300,
            //renderer: renderLast,
            sortable: true
        }],

O que mais posso estar fazendo de errado?, dicas ou sugestões?

Creio que seja no JSON porém eu monto corretamente via VRaptor com @Remotable.

14 Respostas

A

Na sua terceira listagem:
“lastpost”:“[telefone removido]”,
“excerpt”:“Hello, \n\nI am attempting to create one JSON store, simplified below:\n\nvar downloadQueueAllItems= new Ext.data.JsonStore({\n\n root: ‘downloadQueue’,\n fields: [‘DownloadId’, ‘ElementId’, ‘CurMainStatus’],\n data: { downloadQueue: [\n{ “DownloadId”: 1,\n “ElementId”: 113…”,
“replycount”:“4”
},
]
}

Tem uma vírgula extra no final. O FF funciona numa boa com esse lixo mas o IE naum. Esse é um erro bem frequente …
Tenta ai e diz se funcionou.

PS: Melhor tirar essas dúvidas no forum do ext, o pessoal lá já é bem velhaco com essas paradas e naum se engane: ext js naum é fácil e é uma merda!!! (IMO)

P

Cara na String que postei estava com essa virgula a mais, erro de digitação, a questão é o que tem de errado na minha String JSON ou Estou fazendo algo de errado em outro lugar do código?

JSON do site que funciona:
http://extjs.com/forum/topics-browse-remote.php

Meu JSON:

{"users":[{"dvds":null,"id":1,"login":"fabio.pedrosa","name":"Fabio Pedrosa","password":null}, 
              {"dvds":null,"id":2,"login":"teste","name":"Teste","password":null}
             ]
}

E verificando na documentação a propriedade totalProperty é opcional é deve-se usar um JSON assim:

{ images:[{name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
               {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
              ]
}

Analisando ele vem sem as aspas, será que é aqui o erro, alguém já usou essa grid com o VRaptor + JSON?

P

Ninguém usa a grid do EXT aqui para me dar um help?

A

opa eu uso, só que estou usando um proxy não do extjs e sim o Ext.ux.data.DWRProxy
procura sobre ele se não conseguir poste novamente

P

Nesse esquema vc usa com paginação com JSON?

A

cara, tenta lá no fórum do ext, é jogo rápido.

T

Posso saber porque o ExtJS é uma merda? Cara, eu não vejo dificuldade nenhuma no extjs, basta ter conhecimento nos padrões W3C e saber escrever js. O problema dele (do javascript) é que não tem uma IDE com excelente suporte como refactoring, code completation, correções de sintaxe, integrações com apis e etc, o que faz o usuario programador :slight_smile: disperdiçar um bom tempo depurando. O ExtJS é desenvolvido por referencias no mundo javascript. Os cara fizerem a codificação maravilhosamente bem, cross-brownser e ainda “orientado a objeto” (a medida que o js permite é claro).
Além disso o ExtJS tem uma das melhores documentações que conheço.
Quando se refere a “presentation layer” eu me arrisco a dizer que o extjs eh melhor que esses ICEfaces, MyFaces e BlaBlafaces. Pena que ele não esta diretamente vinculado a java e jsf.

Nesse caso vou considerar que você esta chamando o IE ou o programador de lixo uma vez que é culpa do brownser que nao consegue interpretar direito o js ou o programador que cometeu erro de sintaxe.

T

Referente ao problema do Pedrosa.

//total de registros  
           totalProperty: 20,

o atributo totalProperty não representa o total de registros mais sim qual propriedade no seu json armazenará o total. Faz muito sentido usar essa propriedade uma vez que para a paginação do ExtJS funcionar ele precisa saber o total de registros que sua busca possui. Voce pode por exemplo retornar um objeto com 30 registros mas sua paginação terá 5 paginas o que dara um total entre 121 e 150 registros.

Exemplo de utilização:

//propriedade que guarda o total.  
           totalProperty: "total",

json

{total:2000, users": [{....},{.....}]

Esse pode ser um dos motivos do invalid label já que ele nao achou no seu json a propriedade “20” definida no totalProperty.
Uma dica é usar o arquivo extjs-all-debug.js porque ao dar um erro desses você consegue ver mais claramente o stack trace pelo firebug do FF.

A

respondendo tua pergunta:

em 99 eu tava num projeto para o Bank of America que era todo baseado em VB application com muito java script - o projeto afundou por causa do javascript.

Eu sei, o javascript de 99 não existe mais - mudou muito e blablabla, mas posso te dizer que estou usando ext por mais ou menos um ano e estou vendo os mesmos problemas que tive em 99.

Se vc está satisfeito com os os widgets do ext da forma como eles são distribuídos vc realmente deve ser uma cara feliz. Contudo imagina vc qdo tiver que alterar o comportamente de um “componente” padrão, por exemplo: seu client quer poder fazer copy and paste das linhas de uma Grid?

Cara, na boa, é bom mas é uma merda entende?

A

cara, qdo disse lixo disse lixo como sinônimo de “resto”. Acho que o cara entendeu.

pega leve e larga do meu pé troll.

:sunglasses:

J

E antigo mais a duvida e nova ! como ficou ?

A

Apoiado, gostaria de saber da resposta tb…

Abraços,
AS

L

Fiz um post tempos atrás explicando o passo a passo de como montar um grid com paginação e java: http://www.loiane.com/2009/07/como-montar-um-grid-com-paginacao-utilizando-ext-js/
No meu blog vocês também encontram outros posts sobre ExtJS e Java. :slight_smile:

A

Oi Loiane, como vai?

Conheço seu site, aliás o uso constantemente como referência. Será que poderia me dar uma forcinha? Vide post abaixo:

http://www.guj.com.br/posts/list/227786.java

Criado 23 de janeiro de 2009
Ultima resposta 23 de dez. de 2010
Respostas 14
Participantes 7