Grid Json

[zendguru]

Having trouble getting my grid to display data. Ive looked through the FAQ and numerous threads and I dont see a difference in my code then other working code. I took most of my code from a tutorial.

Thanks for the help!

JSON: (Ran through jslint and it says it is good JSON)

{ "total" : "55", "results" : [
	{"mls" 				: 	"1102548"},
	{"address" 			: 	"121 N Applewod Ct - Denver - CO - 80229"},
	{"price" 			: 	"245,000"},
	{"listingStatus"	:	"L Status"},
	{"status" 			: 	"1"},
	{"listingDate"		:	"04/28/2008"},
	{"agent" 			: 	"Chris Mygatt"},
	{"seller" 			: 	"Paul Eastwood"}
]}

Javascript:

var listingDS;
var listingGrid;
var listingCM;
var listingGridData;


listingDs = new Ext.data.Store({
	id: 'listingDs',
	proxy: new Ext.data.HttpProxy({
		url: '/getdata/listings',
		method: 'POST'
	}),
	baseParams: { task: 'LISTING' },
	reader: new Ext.data.JsonReader({
		root: 'results',
		totalProperty: 'total',
		id: 'mls'
	},[
		{name: 'mls', mapping: 'mls'},
		{name: 'address', mapping: 'address'},
		{name: 'price', mapping: 'price'},
		{name: 'listingStatus', mapping: 'listingStatus'},
		{name: 'status', mapping: 'status'},
		{name: 'listingDate', mapping: 'listingDate'},
		{name: 'agent', mapping: 'agent'},
		{name: 'seller', mapping: 'seller'},
		{name: 'action', mapping: 'action'}
	])
});

listingDs.load();

listingCM = new Ext.grid.ColumnModel(
	[{
		header: 'MLS #',
		width: 100,
		sortable: true,
		dataIndex: 'mls'
	},{
		header: 'Street Address',
		width: 300,
		sortable: true,
		dataIndex: 'address'
	},{
		header: 'Price',
		width: 100,
		align: 'right',
		sortable: true,
		dataIndex: 'price',
		renderer: renderNewListingPrice
	},{
		header: ' Listing Status',
		width: 120,
		align: 'center',
		sortable: true,
		dataIndex: 'listingStatus'
	},{
		header: ' Display Status',
		width: 100,
		align: 'center',
		sortable: true,
		dataIndex: 'status',
		renderer: renderNewListingStatus
	},{
		header: 'Listing Date',
		width:150,
		align: 'center',
		sortable: true,
		dataIndex: 'listingDate'
	},{
		header: 'Agent',
		width:100,
		sortable: true,
		dataIndex: 'agent'
	},{
		header: 'Seller',
		width: 100,
		sortable: true,
		dataIndex: 'seller'
	},{
		header: 'Actions',
		width: 80,
		sortable: false,
		renderer: renderNewListingAction
	}]	
);

function renderNewListingPrice(value){
	return '$'+ value;
}
function renderNewListingStatus(value){
	switch(value){
		case "1":
			return '<img src="../images/flag_green.png">';
			break;
		case "2":
			return '<img src="../images/flag_yellow.png">';
			break;
		case "3":
			return '<img src="../images/flag_red.png">';
			break;
	}
}
function renderNewListingAction(){
	return 'Edit View';
}

listingGrid = new Ext.grid.GridPanel(
	{
		title: 'Listings Management',
		ds: listingDS,
		cm: listingCM,
		height: 200,
		stripeRows: true,
		autoExpandColumn: '1',
      	tbar: [{
			text: 'Add New Listing',
			tooltip: 'Click Here to Add a New Listing',
			iconCls:'icon-add',    // this is defined in our styles.css
			handler: displayListingFormWindow
      	}, '-', {
      		text: 'Delete Selected Listing',
			tooltip: 'Click Here to Delete the Selected Listing',
			iconCls:'icon-remove',    // this is defined in our styles.css
			handler: confirmDeleteListing
      	}],
      	listeners: 
      	{
      		rowdblclick: displayListingFormWindow
      	}
	}
);

[evant]

See bolded parts.

var listingPriceField;
var listingSquareFootField;
var listingGeographicField;
var listingTypeField;
var listingAddressField;


listingDs = new Ext.data.Store({
	id: 'listingDs',
	proxy: new Ext.data.HttpProxy({
		url: '/getdata/listings',
		method: 'POST'
	}),
	baseParams: { task: 'LISTING' },
	reader: new Ext.data.JsonReader({
		root: 'results',
		totalProperty: 'total',
		id: 'mls'
	},[
		{name: 'mls', mapping: 'mls'},
		{name: 'address', mapping: 'address'},
		{name: 'price', mapping: 'price'},
		{name: 'listingStatus', mapping: 'listingStatus'},
		{name: 'status', mapping: 'status'},
		{name: 'listingDate', mapping: 'listingDate'},
		{name: 'agent', mapping: 'agent'},
		{name: 'seller', mapping: 'seller'},
		{name: 'action', mapping: 'action'}
	])
});

listingDs.load();

listingCM = new Ext.grid.ColumnModel(
	[{
		header: 'MLS #',
		width: 100,
		sortable: true,
		dataIndex: 'mls'
	},{
		header: 'Street Address',
		width: 300,
		sortable: true,
		dataIndex: 'address'
	},{
		header: 'Price',
		width: 100,
		align: 'right',
		sortable: true,
		dataIndex: 'price',
		renderer: renderNewListingPrice
	},{
		header: ' Listing Status',
		width: 120,
		align: 'center',
		sortable: true,
		dataIndex: 'listingStatus'
	},{
		header: ' Display Status',
		width: 100,
		align: 'center',
		sortable: true,
		dataIndex: 'status',
		renderer: renderNewListingStatus
	},{
		header: 'Listing Date',
		width:150,
		align: 'center',
		sortable: true,
		dataIndex: 'listingDate'
	},{
		header: 'Agent',
		width:100,
		sortable: true,
		dataIndex: 'agent'
	},{
		header: 'Seller',
		width: 100,
		sortable: true,
		dataIndex: 'seller'
	},{
		header: 'Actions',
		width: 80,
		sortable: false,
		renderer: renderNewListingAction
	}]	
);

function renderNewListingPrice(value){
	return '$'+ value;
}
function renderNewListingStatus(value){
	switch(value){
		case "1":
			return '<img src="../images/flag_green.png">';
			break;
		case "2":
			return '<img src="../images/flag_yellow.png">';
			break;
		case "3":
			return '<img src="../images/flag_red.png">';
			break;
	}
}
function renderNewListingAction(){
	return 'Edit View';
}

listingGrid = new Ext.grid.GridPanel(
	{
		title: 'Listings Management',
		ds: listingDS,
		cm: listingCM,
		height: 200,
		stripeRows: true,
		autoExpandColumn: '1',
      	tbar: [{
			text: 'Add New Listing',
			tooltip: 'Click Here to Add a New Listing',
			iconCls:'icon-add',    // this is defined in our styles.css
			handler: displayListingFormWindow
      	}, '-', {
      		text: 'Delete Selected Listing',
			tooltip: 'Click Here to Delete the Selected Listing',
			iconCls:'icon-remove',    // this is defined in our styles.css
			handler: confirmDeleteListing
      	}],
      	listeners: 
      	{
      		rowdblclick: displayListingFormWindow
      	}
	}
);

[halkon_polako]

Try using a JsonStore instead a generic Store.

BTW, do you have any error on firebug? Do you verified that you have all the rows inside the store?

Providing some more info will be useful (maybe a screen capture...)

[zendguru]

See bolded parts.

I dont see any bolded areas in your response.

You can view the page here.

http://dev.interactivetek.com/lms/index

It is the Listings Management Tab

I am getting an A has no properties error.

When I changed it to a Ext.data.JsonStore I get the following error and the page wont load at all

uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no]

[halkon_polako]

Evant is right! Good hawkeye!
See the bolded parts... you have typos in your code.
You have defined listingsDs but you are using listingsDS in your store. (see the uppercase)

[zendguru]

Evant is right! Good hawkeye!
See the bolded parts... you have typos in your code.
You have defined listingsDs but you are using listingsDS in your store. (see the uppercase)

Ouch I spent 3 hours searching forums for a stupid typo.

Thanks for your help much appreciated.