model - Populating a grid with json webservice extjs -
i have web service returns json. json this:
aaa( { "data": { "error":0, "totalproperty":3, "groups": [ { "users": [ { "email":"natalia.busto@geograma.com", "name":"natalia", "surname":"busto jimenez", "rol":"user" } ], "description":"grupo por defecto del dominio demo", "name":"default", "numusers": 1 }, { "users": [ { "email":"gorka.lopez@geograma.com", "name":"gorka", "surname":"lópez rivacoba", "rol":"siteadministrator" }, { "email":"endika.sanchez@geograma.com", "name":"endika", "surname":"sánchez gutiérrez", "rol":"user" }, { "email":"ignacio.gamez@geograma.com", "name":"ignacio", "surname":"gámez ramírez", "rol":"administrator" } ], "description":"grupo nuevo creado para el dominio demo", "name":"group1", "numusers": 3 }, { "users":[], "description":"group2 description", "name":"group2", "numusers": 0 } ], "metadata": { "request time":"16 ms" } }, "success":true }
)
i want create model , store data put parameters description, name , numusers grid.
the ext.data.model next one:
ext.define('data', { extend: 'ext.data.model', hasmany: [{ model: 'group', name: 'groups' }] }); ext.define("group", { extend: 'ext.data.model', fields: [ { type: 'string', name: 'description' }, { type: 'string', name: 'name' }, { type: 'int', name: 'numusers' }, ], belongsto: 'data' });
the store data next
this.store = ext.create('ext.data.store', { model: 'data', proxy: { type: 'ajax', url : 'http://100.100.100.165:8080/ums_servlet_1_0/services/ums?request=getgroups&username=endika.sanchez@geograma.com&key=9856a705-0a2c-4f35-bbc9-f12d15ab234u&callback=aaa&extendedinfo=true&filter', reader: { type: 'json', root: 'data', idproperty: 'name' } }, });
and grid panel next one
var itemsperpage = 8; // set number of items want per page this.store.load({ params:{ start:0, limit: itemsperpage } }); this.grid = new ext.grid.panel( { cls: this.class_name + '_grid', autoscroll: true, store: this.store, flex: 1, style: 'border: solid rgb(234,234,236) 1px', columns: [ { header: 'nombre', dataindex: 'name',flex:1 }, { header: 'descripción', dataindex: 'description',flex:2}, { header: 'número usuarios', dataindex: 'numuser',flex:2}, { xtype:'actioncolumn', width:24, menudisabled: true, items: [{ icon: 'img/edit.png', iconcls: 'edit_delete', tooltip: 'editar', handler: function(){} }] }, { xtype:'actioncolumn', width:24, menudisabled: true, items: [{ icon: 'img/delete.png', iconcls: 'edit_delete', tooltip: 'eliminar', handler: function(){} }] } ], dockeditems: [{ xtype: 'pagingtoolbar', store: this.store, // same store gridpanel using dock: 'bottom', displayinfo: true }], });
this paint grid dont put data of json webservice inside grid. problem?
you need give store name in grid panel, otherwise grid won't identify store. follow steps.
in store:
ext.define('datastorename', { extend: 'ext.data.store', model: 'data', proxy: { type: 'ajax', url : 'url.....', reader: { type: 'json', root: 'data', idproperty: 'name' } } });
in grid panel
this.grid = new ext.grid.panel( { cls: this.class_name + '_grid', autoscroll: true, store: 'datastorename', flex: 1, style: 'border: solid rgb(234,234,236) 1px', columns: [ ] });
Comments
Post a Comment