Solved

Newbie EXTJS Grid Problem

Posted on 2010-11-25
2
781 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:tmonteit
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 34219684
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
 

Author Comment

by:tmonteit
ID: 34245239
amazing...  Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now