[SOLVED] invalid property id

[mjhaston]

See below ... it was redundant code ....

[mjhaston]

I've changed a bunch and now have a new error msg. Anything jump out at ya?

Firebug msg is:

missing : after property id
var RecordDef = Ext.data.Record.create([


.js file

/**
 * @author Andrei
 */

Ext.onReady(function(){

    // create the Data Store
    var ds = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
			url: '/cgidev2p/ajax66c?start=1&limit=20',
			method: 'POST'
        }),

	var RecordDef = Ext.data.Record.create([
		{name: 'company'},
		{name: 'customer'},	   
		{name: 'season'},
		{name: 'style'},
		{name: 'whlsale', type: 'float'},
		{name: 'msrp', type: 'float'},
		{name: 'cost', type: 'float'},
		{name: 'retail', type: 'float'},	   
		{name: 'units', type: 'float'}
	]);

    // create reader that reads the Topic records
    var myReader = new Ext.data.JsonReader({
		totalProperty: "results",
		root: "rows",
		id: "id"
    }, RecordDef );

	ds.setDefaultSort('style', 'asc');


    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([{
            {id:'id', header: "Company", sortable: true, dataIndex: 'company'},
            {header: "Customer", sortable: true, dataIndex: 'customer'},
            {header: "Season", sortable: true, dataIndex: 'season'},
            {header: "Style", sortable: true, dataIndex: 'style'},
            {header: "Wholesale", sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'whlsale'},
            {header: "MSRP", sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'msrp'},			
            {header: "Cost", sortable: true, dataIndex: 'cost', renderer: Ext.util.Format.usMoney},
            {header: "Retail", sortable: true, dataIndex: 'retail', renderer: Ext.util.Format.usMoney},			
            {header: "Units", sortable: true, dataIndex: 'units'}
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el:'grid-ct',
        width:900,
        height:450,
        store: ds,
        cm: cm,
        trackMouseOver:false,
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
        loadMask: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            width: 'auto',			
            getRowClass : function(record, rowIndex, p, ds){
                if(this.showPreview){
                    p.body = '<p>'+record.data.excerpt+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
        bbar: new Ext.PagingToolbar({
            plugins:new Ext.ux.Andrie.pPageSize(),
            pageSize: 20,
            store: ds,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: toggleDetails
            }]
        })
    });

    // render it
    grid.render();

    // trigger the data store load
    ds.load({params:{start:0, limit:20}});

    function toggleDetails(btn, pressed){
        var view = grid.getView();
        view.showPreview = pressed;
        view.refresh();
    }

//-------
	new Ext.Panel({
		title:'Ext.ux.Andrie.pPageSize',
		renderTo:'info-ct',
		contentEl:'info',
		bodyStyle:'padding: 5px',
		width:450
	});
	
	new Ext.Panel({
		title:'Usage',
		renderTo:'usage-ct',
		contentEl:'usage',
		frame:true,
		width:400
	});
	
	new Ext.Panel({
		title:'ChangeLog',
		renderTo:'changelog-ct',
		contentEl:'changelog',
		frame:true,
		width:400,
		height:150,
		autoScroll:true
	});
	
	new Ext.Panel({
		title:'New Config Properties<br>(from Ext.ux.Andrie.Select or Ext.form.ComboBox)',
		renderTo:'config-ct',
		contentEl:'config',
		frame:true,
		width:400
	});
	
	new Ext.Panel({
		title:'New Public Properties and Methods<br>(from Ext.ux.Andrie.Select or Ext.form.ComboBox)',
		renderTo:'public-ct',
		contentEl:'public',
		frame:true,
		width:400
	});
});

data returned

{'results': 20, 'rows':[
{'id':1, company:'EK 01','customer':'07012','season':'BSR','style':'05624','whlsale':23.00,'msrp':48.00,'cost':12.88,'retail':11.89,'units':122},
{'id':2, company:'EK 01','customer':'07012','season':'BSR','style':'35341','whlsale':28.00,'msrp':58.00,'cost':13.91,'retail':54.92,'units':1199},
{'id':3, company:'EK 01','customer':'07012','season':'BSR','style':'62449','whlsale':11.00,'msrp':24.00,'cost':4.19,'retail':23.27,'units':191},
{'id':4, company:'EK 01','customer':'07012','season':'BSR','style':'90189','whlsale':11.00,'msrp':24.00,'cost':4.15,'retail':21.26,'units':126},
{'id':5, company:'EK 01','customer':'07012','season':'BSR','style':'90190','whlsale':11.00,'msrp':24.00,'cost':4.16,'retail':20.02,'units':98},
{'id':6, company:'EK 01','customer':'07012','season':'BSR','style':'90191','whlsale':11.00,'msrp':24.00,'cost':4.16,'retail':19.68,'units':163},
{'id':7, company:'EK 01','customer':'07012','season':'BSR','style':'90732','whlsale':11.00,'msrp':24.00,'cost':4.32,'retail':21.48,'units':1178},
{'id':8, company:'EK 01','customer':'07012','season':'C07','style':'EU103A','whlsale':35.20,'msrp':88.00,'cost':20.43,'retail':58.38,'units':54},
{'id':9, company:'EK 01','customer':'07012','season':'C07','style':'EU109','whlsale':55.20,'msrp':138.00,'cost':26.35,'retail':30.90,'units':24},
{'id':10, company:'EK 01','customer':'07012','season':'C07','style':'EU110','whlsale':67.00,'msrp':168.00,'cost':31.86,'retail':108.02,'units':26},
{'id':11, company:'EK 01','customer':'07012','season':'C07','style':'EU111','whlsale':51.00,'msrp':128.00,'cost':21.71,'retail':25.67,'units':28},
{'id':12, company:'EK 01','customer':'07012','season':'C07','style':'EU112','whlsale':39.00,'msrp':98.00,'cost':18.29,'retail':62.86,'units':19},
{'id':13, company:'EK 01','customer':'07012','season':'C07','style':'EU112A','whlsale':35.20,'msrp':88.00,'cost':20.78,'retail':59.39,'units':47},
{'id':14, company:'EK 01','customer':'07012','season':'C07','style':'EU341','whlsale':39.20,'msrp':98.00,'cost':18.75,'retail':67.37,'units':31},
{'id':15, company:'EK 01','customer':'07012','season':'C07','style':'33258','whlsale':25.00,'msrp':52.00,'cost':12.29,'retail':48.74,'units':55},
{'id':16, company:'EK 01','customer':'07012','season':'C07','style':'33807','whlsale':33.00,'msrp':68.00,'cost':14.94,'retail':42.77,'units':138},
{'id':17, company:'EK 01','customer':'07012','season':'C07','style':'33808','whlsale':33.00,'msrp':68.00,'cost':13.80,'retail':43.42,'units':45},
{'id':18, company:'EK 01','customer':'07012','season':'C07','style':'33810','whlsale':33.00,'msrp':68.00,'cost':13.80,'retail':43.32,'units':20},
{'id':19, company:'EK 01','customer':'07012','season':'C07','style':'35341','whlsale':28.00,'msrp':58.00,'cost':13.91,'retail':55.42,'units':35},
{'id':20, company:'EK 01','customer':'07012','season':'C07','style':'35356','whlsale':28.00,'msrp':58.00,'cost':14.18,'retail':54.67,'units':22}
]}

[Condor]

You have several errors in your javascript. You should really be using Firefox with Firebug or a Javascript IDE (e.g. Aptana) to find these errors.

Corrected code:

var RecordDef = Ext.data.Record.create([
	{name: 'company'},
	{name: 'customer'},
	{name: 'season'},
	{name: 'style'},
	{name: 'whlsale', type: 'float'},
	{name: 'msrp', type: 'float'},
	{name: 'cost', type: 'float'},
	{name: 'retail', type: 'float'},
	{name: 'units', type: 'float'}
]);
var myReader = new Ext.data.JsonReader({
	totalProperty: "results",
	root: "rows",
	id: "id"
}, RecordDef);
var ds = new Ext.data.Store({
	proxy: new Ext.data.HttpProxy({
		url: '/cgidev2p/ajax66c?start=1&limit=20',
		method: 'POST'
	}),
	reader: myReader
});
ds.setDefaultSort('style', 'asc');

var cm = new Ext.grid.ColumnModel([
	{id:'id', header: "Company", sortable: true, dataIndex: 'company'},
	{header: "Customer", sortable: true, dataIndex: 'customer'},
	{header: "Season", sortable: true, dataIndex: 'season'},
	{header: "Style", sortable: true, dataIndex: 'style'},
	{header: "Wholesale", sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'whlsale'},
	{header: "MSRP", sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'msrp'},
	{header: "Cost", sortable: true, dataIndex: 'cost', renderer: Ext.util.Format.usMoney},
	{header: "Retail", sortable: true, dataIndex: 'retail', renderer: Ext.util.Format.usMoney},
	{header: "Units", sortable: true, dataIndex: 'units'}
]);

[mjhaston]

I'll plug this in. Thank you very much.

I'm working in Dreamweaver, but have been using Firefox and Firebug to test. Only one error came up in Firebug, but I have a feeling once the one was fixed the others would appear!

Grid works great to display the initial 20 records, but seems the paging is not working and the arror icons are disabled. I check into this on the forums before asking for additional help.

Thanks again Condor.

[mjhaston]

Gesh, my paging issue was the fact that I didn't return the total records count, I had that returning the page size! Doh! I figured that out from another post by Condor.

Next I'll want to add "grouping" to this grid. Hopefully it's not that bad. I have been staring at the grouping example!