Paginação com EXT JS e JSON

This message was edited 4 times. Last update was at 23/01/2009 16:18:10

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

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

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

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:

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

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.

This message was edited 1 time. Last update was at 23/01/2009 15:44:28

Na sua terceira listagem:
"lastpost":"1232716673",
"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)

This message was edited 2 times. Last update was at 23/01/2009 16:04:19

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:

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

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

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

Virtual Machine Man Membro desde: 01/01/2009 15:24:06 Mensagens: 660 Offline

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

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

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

This message was edited 1 time. Last update was at 28/01/2009 21:09:33

agodinhost wrote:... ext js naum é fácil e é uma merda!!! (IMO)

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

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.

agodinhost wrote:... O FF funciona numa boa com esse lixo mas o IE naum. Esse é um erro bem frequente ...

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.

This message was edited 1 time. Last update was at 28/01/2009 21:06:10

Referente ao problema do Pedrosa.

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:

json

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.

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?

This message was edited 1 time. Last update was at 29/01/2009 15:07:39

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

pega leve e larga do meu pé troll.

8-)

E antigo mais a duvida e nova ! como ficou ?

Apoiado, gostaria de saber da resposta tb...

Abraços,
AS

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.

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

Notícias, artigos e o maior fórum brasileiro sobre Java