Results 1 to 6 of 6

Thread: Grid Json

  1. #1

    Default Grid Json

    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)
    Code:
    { "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:
    Code:
    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
          	}
    	}
    );

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    See bolded parts.

    Code:
    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
          	}
    	}
    );

  3. #3
    Ext User halkon_polako's Avatar
    Join Date
    Nov 2007
    Location
    Barcelona
    Posts
    193

    Default

    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...)

  4. #4

    Default

    Quote Originally Posted by evant View Post
    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]

  5. #5
    Ext User halkon_polako's Avatar
    Join Date
    Nov 2007
    Location
    Barcelona
    Posts
    193

    Default

    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)

  6. #6

    Default

    Quote Originally Posted by halkon_polako View Post
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •