1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    37
    Answers
    3
    Vote Rating
    0
    rnel is on a distinguished road

      0  

    Default Answered: grip panel not displaying elements

    Answered: grip panel not displaying elements


    hi,

    I'm having trouble with my gripanel, the content returned by the server
    Code:
    {"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 :

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


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

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

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

  2. Try to fix your code as below:
    Code:
    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.

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Try to fix your code as below:
    Code:
    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.

  4. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    37
    Answers
    3
    Vote Rating
    0
    rnel is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Looking at the source code of Ext.data.Model constructor and you will see its signature is:
    Code:
    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:
    Code:
    record = new Model(undefined, me.getId(node), node, convertedValues = {});

  6. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    37
    Answers
    3
    Vote Rating
    0
    rnel is on a distinguished road

      0  

    Default


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

Thread Participants: 1