Newbie EXTJS Grid Problem

I am trying to put an extjs gridpanel into my  django app using a simple student example.

The problem is that the Grid does not display any data.
The page displays the Grid Panel and Column Headings.
I think it is also displaying the correct # of rows.  Unfortunately, all the rows are blank.
I'm using Firebug and I can see the correct json data getting passed, but still no data displayed.

I've done lots of trial and error, but I can't seem to make it work.  I don't know a lot about ExtJS to see what may be going wrong.   I've attached the javascript and the json data (purely fictional) that my server is sending.  

Here is the example I am using:  http://ido.nl.eu.org/static/pir/.    But it seems to be a based on an older version of extjs.  I'm trying to use extjs 3.0.0

Experts, do you see anything wrong with my approach?
What should I try next?
jspost-nov-10.js
jspost-json-data.txt
tmonteitAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
You current JSON object :

{
    "totalCount": "8",
    "students": [
        {
            "pk": "123",
            "model": "app.student",
            "userprofile_ptr": 2,
            "first_name": "Al",
            "last_name": "Pacino",
            "grade": 12,
            "gender": "M",
            "opportunity_interests": [
                
            ],
            "school": 1,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        },
        {
            "pk": "2912",
            "model": "app.student",
            "userprofile_ptr": 3,
            "first_name": "Ben",
            "last_name": "Stiller",
            "grade": 10,
            "gender": "M",
            "opportunity_interests": [
                
            ],
            "school": 1,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        },
        {
            "pk": "2811",
            "model": "app.student",
            "userprofile_ptr": 4,
            "first_name": "Brad",
            "last_name": "Pitt",
            "grade": 9,
            "gender": "M",
            "opportunity_interests": [
                
            ],
            "school": 1,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        },
        {
            "pk": "8212",
            "model": "app.student",
            "userprofile_ptr": 5,
            "first_name": "Bruce",
            "last_name": "Willis",
            "grade": 10,
            "gender": "M",
            "opportunity_interests": [
                
            ],
            "school": 1,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        },
        {
            "pk": "7982",
            "model": "app.student",
            "userprofile_ptr": 8,
            "first_name": "Charlie",
            "last_name": "Sheen",
            "grade": 11,
            "gender": "M",
            "opportunity_interests": [
                
            ],
            "school": 7,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        },
        {
            "pk": "7882",
            "model": "app.student",
            "first_name": "David",
            "last_name": "Beckham",
            "grade": 12,
            "gender": "M",
            "opportunity_interests": [
                
            ],
            "school": 7,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        },
        {
            "pk": "8292",
            "model": "app.student",
            "userprofile_ptr": 10,
            "first_name": "George",
            "last_name": "Cloony",
            "grade": 10,
            "gender": "M",
            "opportunity_interests": [
                
            ],
            "school": 7,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        },
        {
            "pk": "8291",
            "model": "app.student",
            "userprofile_ptr": 11,
            "first_name": "Ivana",
            "last_name": "Trump",
            "grade": 12,
            "gender": "F",
            "opportunity_interests": [
                
            ],
            "school": 7,
            "middle_init": "J",
            "date_added": "2010-10-30" 
        } 
    ]
}

Open in new window


I get it work with this one (I put inside the field section the first_name, last_name and grade objects :

{
    "totalCount": "8",
    "students": [
        {
            "pk": "123",
            "model": "app.student",
            "first_name": "Al",
            "last_name": "Pacino",
            "grade": 12,
            "school": 1,
            "fields": {
                "userprofile_ptr": 2,
                "gender": "M",
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        },
        {
            "pk": "2912",
            "model": "app.student",
            "first_name": "Ben",
            "last_name": "Stiller",
            "grade": 10,
            "school": 1,
            "fields": {
                "userprofile_ptr": 3,
                "gender": "M",
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        },
        {
            "pk": "2811",
            "model": "app.student",
            "first_name": "Brad",
            "last_name": "Pitt",
            "grade": 9,
            "school": 1,
            "fields": {
                "userprofile_ptr": 4,
                "gender": "M",
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        },
        {
            "pk": "8212",
            "model": "app.student",
            "first_name": "Bruce",
            "last_name": "Willis",
            "grade": 10,
            "school": 1,
            "fields": {
                "userprofile_ptr": 5,
                "gender": "M",
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        },
        {
            "pk": "7982",
            "model": "app.student",
            "first_name": "Charlie",
            "last_name": "Sheen",
            "grade": 11,
            "school": 7,
            "fields": {
                "userprofile_ptr": 8,
                "gender": "M",
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        },
        {
            "pk": "7882",
            "model": "app.student",
            "userprofile_ptr": 9,
            "first_name": "David",
            "last_name": "Beckham",
            "grade": 12,
            "school": 7,
            "fields": {
                "gender": "M",
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        },
        {
            "pk": "8292",
            "model": "app.student",
            "first_name": "George",
            "last_name": "Cloony",
            "grade": 10,
            "gender": "M",
            "school": 7,
            "fields": {
                "userprofile_ptr": 10,
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        },
        {
            "pk": "8291",
            "model": "app.student",
            "first_name": "Ivana",
            "last_name": "Trump",
            "grade": 12,
            "school": 7,
            "fields": {
                "userprofile_ptr": 11,
                "gender": "F",
                "opportunity_interests": [
                    
                ],
                "middle_init": "J",
                "date_added": "2010-10-30" 
            } 
        } 
    ]
}

Open in new window


You need to modify the name of the id, pk instead student_id
The updates need to be done in the store and column

The javascript file :


var APP = { 
init: function() {
    var fm = Ext.form;
    var ps = 60;

    Ext.QuickTips.init();

    var studentStore = new Ext.data.JsonStore({
        // store configs
        autoDestroy: true,
        url: 'jspost-json-data.txt',
        storeId: 'studentStore',
        // reader configs
        root: 'students',
        idProperty: 'student_id',
        fields: ['pk', 'last_name', 'first_name', 'school', 'grade']
        }/*  Many iterations of trial and error on this.  
             None work, and I'm not sure if this is necessary.
          ,[
          {'student_id', mapping:'fields.student_id'},
          {'last', mapping:'fields.last_name'},
          {'first', mapping:'fields.first_name'},
          {'school', mapping:'fields.school'},
          {'grade', mapping:'fields.grade'} 
        ]*/);

    // Won't load automatically unless I call this.
    // Example doesn't do this.  Huh?...
    studentStore.load()
    
    var grid = new Ext.grid.GridPanel({
        store: studentStore,
        columns: [
            {
                id       :'pk',
                header   : 'Student ID', 
                sortable : true,
                width    : 160, 
                dataIndex: 'pk'
            },
            {
                header   : 'Last', 
                width    : 75, 
                sortable : true,
                dataIndex: 'last_name'
            },
            {
                header   : 'First', 
                width    : 75, 
                sortable : true,
                dataIndex: 'first_name'
            },
            {
                header   : 'School', 
                width    : 75, 
                sortable : true,
                dataIndex: 'school'
            },
            {
                header   : 'Grade', 
                width    : 85, 
                sortable : true,
                dataIndex: 'grade'
            },
        ],
        stripeRows: true,
        height: 350,
        width: 600,
        title: 'Array Grid',
        stateful: true,
        stateId: 'grid'
    });

    grid.render('topic-grid');
}};

Ext.onReady(APP.init, APP);

Open in new window

grid.jpg
0
 
tmonteitAuthor Commented:
amazing...  Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.