Grid - No properties problem

[jwong]

I can't seem to find the problem and I've been going through the js over and over. I started from the array-grid.js in the examples and replaced everything one by one with the variables, names, etc I needed.

When I call ext-all.js it says that 'A has no properties'. When I call ext-debug.js it says 'Ext.onReady is not a function'

/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * [email protected]
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // create the data store
    var ds = new Ext.data.JsonStore({
        url:'ptn.txt',
        totalProperty: 'total',
        root: 'data',
        fields: [
            {name: 'ptnMatch'},
            {name: 'ptnLname'},
            {name: 'ptnFname'},
            {name: 'ptnDob', type: 'date', dateFormat: 'n/j/y'},
            {name: 'ptnSsn'},
            {name: 'ptnId'},
            {name: 'ptnMrno'},
            {name: 'ptnZip'}
        ],
        remoteSort: true
    });
    
    function ptnMatch(val) {
        if (val == ' ') {
            return ' ';
        }
        else{
            return (val + '%');
        }
        return val;
    }
    
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        ds: ds,
        columns: [
            {id:'ptnMatch',header: "Match", width: 160, sortable: true, renderer: 'ptnMatch', dataIndex: 'ptnMatch'},
            {header: "Last Name", width: 75, sortable: true, dataIndex: 'ptnLname'},
            {header: "First Name", width: 75, sortable: true, dataIndex: 'ptnFname'},
            {header: "DOB", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'ptnDob'},
            {header: "SSN", width: 75, sortable: true, dataIndex: 'ptnSsn'},
            {header: "Ptn ID", width: 75, sortable: true, dataIndex: 'ptnId'},
            {header: "Med Record #", width: 75, sortable: true, dataIndex: 'ptnMrno'},
            {header: "Zip Code", width: 75, sortable: true, dataIndex: 'ptnZip'}
        ],
        stripeRows: true,
        height:350,
        width:770,

        tbar: new Ext.PagingToolbar({
            pageSize: 15,
            ds: ds,
            displayInfo: true,
            displayMsg: 'Displaying results {0} - {1} of {2}',
            emptyMsg: "No SnapPacks to display",
        })
        
    });

    grid.render('grid-example');

    grid.getSelectionModel().selectFirstRow();
    ds.load({params:{start: 0, limit: 15}});
});

The txt file looks like this:

{"total":"2","data":
[
    {
        ptnMatch:    "20",
        ptnFname:    "Lane",
        ptnLname:    "John",
        ptnDob:        "10/10/1970",
        ptnSsn:        "125-12-1255",
        ptnId:        "19287",
        ptnMrno:    "1231",
        ptnZip:        "33760"
    },
    {
        ptnMatch:    "20",
        ptnFname:    "Limbo",
        ptnLname:    "James",
        ptnDob:        "10/10/1970",
        ptnSsn:        "125-12-1255",
        ptnId:        "19287",
        ptnMrno:    "1231",
        ptnZip:        "33760"
    }
]
}}

Thanks in advance for taking a look. I'd appreciate any help. I am very, very new to ext and javascript >_<;

[[email protected]]

change ds: to store:

[mjlecomte]

ds is shorthand for store. initComponent checks for some of the shorthand names and converts them.

    initComponent : function(){
        Ext.grid.GridPanel.superclass.initComponent.call(this);

        
        
        this.autoScroll = false;
        this.autoWidth = false;

        if(Ext.isArray(this.columns)){
            this.colModel = new Ext.grid.ColumnModel(this.columns);
            delete this.columns;
        }

        
        if(this.ds){
            this.store = this.ds;
            delete this.ds;
        }

[mjlecomte]

use ext-all-debug.js during development.

What does your html page look like?

How about an image from firebug showing the DOM tab? Is Ext defined in it?

Disable the stateManager for time being and do hard refresh.

[[email protected]]

MJ, that's true of the grid, but not the paging toolbar:
Demonstrated here:
http://tdg-i.com/img/screencasts/2008-04-30_1836.swf

[mjlecomte]

A.) Oops, yeah, you are correct, good thing I avoid all the shorthand stuff, seems like something that should be consistent.
B.) Your computer is too fast (I'm about to throw mine out the window)
3.) I don't think this helps the OP, as his error was different. Will wait to see if OP responds to my Questions.

[[email protected]]

i'm confused. I changed the ds to store and the grid appeared.

[jwong]

There's an attachment of firebug showing the DOM tab.

I changed ds to store and the grid shows up.
The call to the txt file is being made but the grid does not populate with the data.

I can work with this though, thanks you two!

[mjlecomte]

Next steps would be check the response in firebug console, add a loadexception/load listener, blah blah blah.