Solved

Newbie EXTJS Grid Problem

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP Web Development 6 29
assigning javascript variable to php variable 8 43
ASP.NET data base connection 35 43
Building JSON/JQuery Results Display 11 28
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

726 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