Solved

Newbie EXTJS Grid Problem

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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