1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
    orest is on a distinguished road

      0  

    Default Unanswered: ExtJs 4 Add records to the grid from JSON

    Unanswered: ExtJs 4 Add records to the grid from JSON


    I'm a new ExtJS user, and I have the following problem. I'm trying to load some data to the ExtJS grid, which is serialized to json on the server (i use django serialize() method), but i'm getting an empty grid. The problem seems to be in the callback function, which loads the data to the grid, but i can't solve it.
    Here is my code:
    Controller-function

    Code:
    renderStudentList:function(){
                var ul = this.getStore('Users');                
                ul.load({
                    scope   :this,
                    callback : function(records, operation, success){
                        for(i in records){
    /* here, i think, should be a code that assigns values from json to the grid records */
                            console.log(records[i].get('fields').name, records[i].get('fields').email);                 
                        }       
                    }       
                });
        }
    json-data, which i get from the server
    Code:
    {success:true, "students":[{"pk": 1, "model": "poll.student", "fields":  {"name": "Bob", "email": "bob@mail.ua"}}, {"pk": 2, "model":  "poll.student", "fields": {"name": "Sam", "email": "sam@gmail.com"}}]}
    my model
    Code:
    Ext.define('AM.model.User', {
        extend: 'Ext.data.Model',
        idProperty: 'pk',
        fields: [{
            name:'pk', 
            type:'integer'
        },{
            name: 'fields',
            type: 'object'
        }]
    });
    my store
    Code:
    Ext.define('AM.store.Users', {
        extend: 'Ext.data.Store',
        model: 'AM.model.User',
      //  autoLoad: true,
    
        proxy: {
            type: 'ajax',
            api: {
                read: '/ex/'            
            },
            reader: {
                idProperty: 'pk',
                type: 'json',
                root: 'students',
                successProperty: 'success'
            }
        }
    });
    Thanks to all!

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    Answers
    545
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    You shouldn't need a callback, it should all be automatic.

    What do the dataIndex values on your grid look like? Are you using a renderer on your grid columns to pull apart your object fields?

    Usually for something like this you wouldn't use an field containing an object, you'd pull it apart in the field mappings:

    Code:
    fields: [
        'pk',
        {name: 'name', mapping: 'fields.name'},
        {name: 'email', mapping: 'fields.email'}
    ]
    You can then use these fields for your dataIndex values on your columns. Note that columns do not support dot-notation for the dataIndex, it must just be a field name.

    I've omitted the types in my field definitions above. You can include them if you want but they aren't necessary unless you want to perform some sort of type conversion.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
    orest is on a distinguished road

      0  

    Default


    Thank you, skirtle, for turning me into the right direction. I've solved the problem.

Thread Participants: 1

Tags for this Thread