PDA

View Full Version : Grid Json



zendguru
26 Apr 2008, 8:03 AM
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
26 Apr 2008, 8:11 AM
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
26 Apr 2008, 8:15 AM
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
26 Apr 2008, 8:36 AM
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
26 Apr 2008, 8:45 AM
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
26 Apr 2008, 8:51 AM
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.