PDA

View Full Version : grip panel not displaying elements



rnel
5 Nov 2012, 5:30 AM
hi,

I'm having trouble with my gripanel, the content returned by the server


{"users":[{"email":"admin@mail.com","id":1,"login":"root","mdp":"prediwas","nom":"root","prenom":"root","profiles":[]},
{"email":"","id":3,"login":"test","mdp":"test","nom":"test","prenom":"test","profiles":[]}],"success":true}


is not displayed in the grid, instead i've got this (see pic)

39818http://www.sencha.com/forum/image/png;base64,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dKUrXe2U6EpXIiIiIuHyn1eTJY7jxMd2WnSlK13paqdEV7oSERERCX9cvpIscRwnPrbToitd6UpXOyW60pWIiIhI+P2PP5MljuPEx3ZadKUrXelqp0RXuhIREREJMQAAAMCq8J+kLl++nPhYAGgD/wAAtKNQLpfL5fL8/Pz8/HypVCqVSnNzc8VisVgsFgqFQqGQz+dzuVwul5udnZ2dnZ2ZmZmenp6env7+++/TfvAAAADAFjMpAAAAAKpMCgAAAIAqkwIAAACgqrmTguvXr1+6dOmLL74YHR2dmZm5ceNGC5YEAAAAJNbIpOCD3oOn4kSTgo8//vjBBx/cs2fP3r17jxw58uGHHxoWAAAAwHZ2m0nB6EAUQgiJJgWLi4v9/f2hxrFjx+bn51uzMAAAACCBBn6nIB44mGhScO3atRdffLF2UnDixIm//vqrNQsDAAAAEmjipODvv//OZrO1k4Jnn312aWmpNQsDAAAAEmjipOCff/555513uru71yYF/f39CwsLLVgVAAAAkExzJwVTU1N33313ZUywe/fu06dPt2BJAAAAQGLNnRRcvXr10KFDlUnBvffe++2337ZgSQAAAEBijX32QQghhH+/f8eTgp9++unw4cOVww8cOPDll1+2YEkAAABAYg38TkE+n8vlcnf4OwWlUum777576aWXdu3atTZruP/++4eHhy9cuHD9+vWWrRAAAABoXFMmBefPn+/r69u3b1/tmCCE0NXV1d3dfeDAgU8//bSViwQAAAAatPWTglKpdPz48bXRQFdXV+2koHLhX//6Vy6Xa/FSAQAAgNtqyqTg3Xfffe21106ePHn8+PEnnnji0Ucfffjhh48ePfrUU08999xzr7zyyptvvjk9Pd3ipQIAAAC31ZS/Prhx40a5XL5y5covv/xy4cKF8+fPT05OTk1N/fjjj7/99ls+n19eXr5x40Yr1wkAAAA0olnvaAgAAADsRCYFAAAAQJVJAQAAAFBlUgAAAABUhXxSFy9eTHwsALSBtE/iAABNEf6T1OXLlxMfCwBtIO2TOABAU/xXf32Q9is0AEhT2idxAICmMCkAgITSPokDADSFSQEAJJT2SRwAoClMCgAgobRP4gAATdHcScHS0tLFixc/++yzr7766vLly8vLyy143QYArZH2SRwAoCluOSkYHYjCioOn4gSTgo8++uiBBx7Ys2fP3r17Dx8+fPbsWcMCANpG2idxAICmuOWkYLi3d7jyOwXv94aDp87d2aRgbm4uk8mEGo8//ng+n2/NqzcAaLa0T+IAAE3R4F8fxKcO3vGkYGFh4YUXXqidFDzzzDPz8/OtefUGAM2W9kkcAKApGpsUVAcFdzApuHbt2sDAQO2k4Omnny6VSq159QYAzZb2SRwAoCkamRR80BsOnoqTvKPhW2+91d3dvTYpyGQyxWKxBS/dAKAF0j6JAwA0xW0nBcO9IToVJ/zsg8nJybvuuqsyJti9e/d7773XgtdtANAaaZ/EAQCa4raffRANxMk/JfH3339/6KGHKpOCffv2TUxMtOB1GwC0RtoncQCAprjVpKDmQxIrH5R47k4nBT/88MOhQ4cqh+/fv//zzz9v/ss2AGiRtE/iAABN0eBnH9zx7xTkcrlvvvnm5MmTu3btWps13HfffadPn56amlpaWmrZyzgAaJK0T+IAAE3RlEnB+Ph4b2/vPffcUzsmCCF0dXV1d3fv37//k08+aeUrOQBohrRP4gAATbH1k4JcLtff3782Gujq6qqdFFQuHD169MqVKy1+PQcAWyvtkzgAQFM0ZVLw9ttvv/rqq88//3x/f/+xY8ceeeSRI0eOPPbYY08++eSJEydefvnlN954448//mjx6zkA2Fppn8QBAJqiKX99sLy8XCgULl269PPPP09NTY2Pj4+Ojk5OTl64cOHXX3+9evVquVxeXl5u5Ys5ANhyaZ/EAQCaolnvaAgAbS/tkzgAQFOYFABAQmmfxAEAmsKkAAASSvskDgDQFCYFAJBQ2idxAICmCPmkLl68mPhYAGgDaZ/EAQCaIqT9AAAAAIBtxKQAAAAAqDIpAAAAAKpMCgAAAIAqkwIAAACgyqQAAAAAqDIpAAAAAKpMCgAAAIAqkwIAAACgyqQAAAAAqDIpAAAAAKpMCgAAAIAqkwIAAACgyqQAAAAAqDIpAAAAAKpMCgAAAIAqkwIAAACgyqQAAAAAqDIpAAAAAKr+H+0VBajbmQ6sAAAAAElFTkSuQmCC
this is the code for the grid :


Ext.define('Ext.dtp.pdw.views.users.UsersGridView', {


extend : 'Ext.grid.Panel',

// usersStore
store : Ext.create('Ext.dtp.pdw.stores.User', {
storeId : 'usersStore',
autoLoad : true
}),

// profiles combo
profilesCombo : Ext.create('Ext.form.field.ComboBox',{
store : Ext.create('Ext.dtp.pdw.stores.Profile'),
valueField : 'id',
displayField : 'nom'
}),

columns : [
{xtype : 'rownumberer'},
{
renderer : function(value){
if (value == 'H'){
return '<img src=\'' + PDW_IMAGES_PATH + '/user_male.png\' />' ;
}
if (value == 'F'){
return '<img src=\'' + PDW_IMAGES_PATH + '/user_female.png\' />' ;
}
return '<img src=\'' + PDW_IMAGES_PATH + '/user.png\' />' ;
},
dataIndex : 'gender'
},{
text : 'Nom',
dataIndex : 'nom'
}, {
text : 'Prenom',
dataIndex : 'prenom'
},{
text : 'login',
dataIndex : 'login'
},{
text : 'email',
dataIndex : 'email'
},{
text : 'profile',
dataIndex : 'profiles',
renderer : function(value){
if (value){
return this.profilesCombo.store.getById(value).get('nom') ;
}
else {
return '' ;
}
},
editor : this.profilesCombo
}
],





constructor : function(config){
this.callParent([config]) ;
this.storeId = 'usersStore' ;
}

}) ;


the code for the model is the following :



Ext.define('Ext.dtp.pdw.models.User',{


extend : 'Ext.data.Model',

fields : [
//{name : 'mdp', type : 'string'},
{name : 'email', type : 'string'},
{name : 'id', type : 'int'},
{name : 'login', type : 'string'},
{name : 'nom', type : 'string'},
{name : 'prenom', type : 'string'},
{name : 'profiles', type : 'int'}
],

/*validations : [
{type : 'format', field : 'nom', matcher : '/:alpha/'},
{type : 'format', field : 'prenom', matcher : '/:alpha/'},
{type : 'format', field : 'login', matcher : '/:alpha/'},
//{type : 'format', field : 'mdp', matcher : '/^[a-z](A-Z)+[_-](0-9)+$/'},
{type : 'email', field : 'email'}
],*/


constructor : function(config) {
this.callParent([config]) ;
}


}) ;



and this is the code for the store :


Ext.define('Ext.dtp.pdw.stores.User', {

extend : 'Ext.data.Store',


model : 'Ext.dtp.pdw.models.User',

proxy : {
type : 'ajax',
url : 'users',
reader : {
type : 'json',
root : 'users',
idProperty : 'id'
},
api : {
destroy : 'users/delete',
read : 'users',
update : 'users/update',
create : 'users/create'
},
actionMethods : {
destroy : 'POST',
read : 'POST',
update : 'POST',
create : 'POST'
}
},


constructor : function(config){
this.callParent([config]) ;
}

}) ;


the whole is called in an app.js :


Ext.application({

name : 'Prediwaste',
launch : function(){

Ext.Loader.setConfig({
enabled : true
}) ;
Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [
//homepage()
Ext.create('Ext.dtp.pdw.views.users.UsersGridView')
]
}) ;
}
}) ;

So, guys, what's the matter ? Thanks.

vietits
5 Nov 2012, 2:36 PM
Try to fix your code as below:


Ext.define('Ext.dtp.pdw.models.User',{
extend : 'Ext.data.Model',


fields : [
//{name : 'mdp', type : 'string'},
{name : 'email', type : 'string'},
{name : 'id', type : 'int'},
{name : 'login', type : 'string'},
{name : 'nom', type : 'string'},
{name : 'prenom', type : 'string'},
{name : 'profiles', type : 'int'}
],

/*validations : [
{type : 'format', field : 'nom', matcher : '/:alpha/'},
{type : 'format', field : 'prenom', matcher : '/:alpha/'},
{type : 'format', field : 'login', matcher : '/:alpha/'},
//{type : 'format', field : 'mdp', matcher : '/^[a-z](A-Z)+[_-](0-9)+$/'},
{type : 'email', field : 'email'}
],*/

constructor : function(config) {
// this.callParent([config]) ;
this.callParent(arguments) ;
}
}) ;

BTW, if you won't do anything in the model constructor then it will be better to remove the constructor out of the model definition.

rnel
6 Nov 2012, 6:10 AM
ok, u just still the best, thanks, it works now after i've done the modifications. BTW, i still don't understand what is supposed to be in the arguments parameter, can you please give me some infos. thanks again.

vietits
6 Nov 2012, 5:17 PM
Looking at the source code of Ext.data.Model constructor and you will see its signature is:


constructor: function(data, id, raw, convertedData) {

Where id, raw and convertedData arguments are used internally by the framework. Here they are used by the Ext.data.reader.Reader to construct a new record to contain extracted data from raw data:


record = new Model(undefined, me.getId(node), node, convertedValues = {});

rnel
7 Nov 2012, 12:43 PM
ok, i got it, i'll pay more attention now to the source code, thanks again. BTW, congrats on the election !