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