PDA

View Full Version : Problem using rest proxy. Please help



PrashanthSiemens
22 Feb 2012, 12:41 PM
Hi,

I'm new Ext JS. I'm trying to load data into grid by making a call to rest service.
for some reason it renders the grid with the column header but data is not populated.
Please let me know if i'm doing some thing wrong.

Here is my folder structure.
app
/controller
Participants.js
/model
Participant.js
/store
Participants.js
/view
/participant
List.js
extjs
app.js
index.html

Here is my index.html content:

<html>
<head>
<title>Demand Response Management System</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js file content:

Ext.application({
name: 'AM',

appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',

items: [
{
xtype: 'participantlist'
}

]
});
},
controllers: [
'Participants'
]


});


/app/model/Participant.js content:

Ext.define('AM.model.Participant', {
extend: 'Ext.data.Model',
fields: [
{name: 'accountId', type: 'int'},
{name: 'contactInfo', type: 'string'},
{name: 'description', type: 'string'},
{name: 'name', type: 'string'},
{name: 'participantId', type: 'int'},
{name: 'participantSitesCount', type: 'int'},
{name: 'subType', type: 'string'},
{name: 'type', type: 'string'}
]

});

/app/store/Participants.js content:

Ext.define('AM.store.Participants', {
extend: 'Ext.data.Store',
model: 'AM.model.Participant',

proxy: {
type: 'rest',
url : 'DR/Rest/Participants',
reader: {
type: 'xml',
record: 'participant',
root: 'collection'
}
}

});


/app/controller/Participants.js content:

Ext.define('AM.controller.Participants', {
extend: 'Ext.app.Controller',
stores: ['Participants'],
models: ['Participant'],
views: ['participant.List'],
init: function() {
this.control({
'participantlist': {
itemdblclick: this.editParticipant
}
});
},

editParticipant: function(grid, record) {
alert("test participant click");

}
});

/app/view/participant/List.js content:

Ext.define('AM.view.participant.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.participantlist',

title : 'All Participants',
store: 'Participants',
initComponent: function() {
this.columns = [
{header: 'Participant Id', dataIndex: 'participantId', flex: 1},
{header: 'AccountId', dataIndex: 'accountId', flex: 1},
{header: 'Participant Name', dataIndex: 'name', flex: 1},
{header: 'Sub Type', dataIndex: 'subType', flex: 1},
{header: 'Participant Type', dataIndex: 'type', flex: 1},
{header: 'contactInfo', dataIndex: 'contactInfo', flex: 1},
{header: 'description', dataIndex: 'description', flex: 1}
];

this.callParent(arguments);
}
});

URL user to launch the site:
http://localhost:8080/index.htlm


Rest Call complete URL: http://localhost:8080/DR/Rest/Participants
and here is the XML output from rest call

<collection>
<participant>
<accountId>100012</accountId>
<contactInfo>Facilities Manager, Phone#: 123-333-2376</contactInfo>
<description>My Company</description>
<name>Steve</name>
<participantId>1</participantId>
<participantSitesCount>0</participantSitesCount>
<subType>Large</subType>
<type>Commercial</type>
</participant>
<participant>
<accountId>100013</accountId>
<contactInfo>Manager, Phone#: 123-333-2376</contactInfo>
<description>My Company1</description>
<name>Steve12</name>
<participantId>2</participantId>
<participantSitesCount>0</participantSitesCount>
<subType>Small</subType>
<type>Residential</type>
</participant>
</collection>



Confirmed the restcall works if i type rest call url in browser it returns above XML.

and if i replace proxy with data in store file the grid get populated.
data: [
{participantSitesCount:1, participantId: 1, accountId:1001, name:'participant Name', subType:'mySubType', type:'myType', contactInfo: 'ContactInformation', description: 'description'}
]

The issue is only when i make a rest call.

Please help.

mitchellsimoens
22 Feb 2012, 1:29 PM
Have you inspected the Store to see if the data is getting placed into the Store? If not then it is probably an issue with your reader configuration.

PrashanthSiemens
23 Feb 2012, 5:16 AM
I'm using crome how do I debug and see the exact rest url and values in the store.

mitchellsimoens
23 Feb 2012, 5:34 AM
Open the dev tools and go into the network tab.

PrashanthSiemens
24 Feb 2012, 7:08 AM
I do not see request to restcall in Netwaork tab. looks like the reader is never executed.

This is what i see on console tab.
XHR finished loading: "http://localhost:8080/extjs/src/data/proxy/Rest.js?_dc=1330095213254".
XHR finished loading: "http://localhost:8080/extjs/src/data/reader/Xml.js?_dc=1330095213254".
XHR finished loading: "http://localhost:8080/extjs/src/container/Viewport.js?_dc=1330095213318".

Thanks for your help.

PrashanthSiemens
24 Feb 2012, 8:17 AM
Solved the problem. I was missing load call in controller init function.

init: function() {
this.getParticipantsStore().load();
},