Solved

Newbie EXTJS Grid Problem

Posted on 2010-11-25
2
778 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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

760 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

18 Experts available now in Live!

Get 1:1 Help Now