grip panel not displaying elements

[rnel]

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)

pic_sencha.jpg
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]

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]

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]

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]

ok, i got it, i'll pay more attention now to the source code, thanks again. BTW, congrats on the election !