Ext.application and Ext.direct: data doesnt get displayed - extjs4

Question

I am new to ExtJS and have written a sample App using Ext.application with Ext.direct. I configured my model as shown below
Ext.define('AM.model.UserModel', {
extend: 'Ext.data.Model',
alias : 'widget.userModel',
fields: ['SlNo','name']
proxy: {
type: 'direct',
directfn: HelloWorld.getGridDetails
}
});
and I am using grid Panel as shown below
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'Users',
initComponent: function() {
this.store = {
model:'AM.model.UserModel',
autoload:true,
};
this.columns = [
{
header: 'SlNo',
dataIndex: 'SlNo',
width:100,
disabled:false
},
{
header: 'Name',
dataIndex: 'name',
width:150
}
];
this.callParent(arguments);
}
});
finally my index.js looks like this
Ext.require('Ext.direct.*', function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
});
Ext.require([ 'AM.view.user.List','AM.model.UserModel']);
Ext.application({
name: 'AM',
appFolder:'myApp',
launch: function() {
Ext.Direct.addProvider(Ext.app.DirectAPI);
Ext.create('Ext.container.Viewport', {
items: {
xtype: 'userlist',
width: 552
},
renderTo: Ext.getBody()
});
}
});
The data I receive when I call HelloWorld.getGridDetails from index.js is as shown below
action: "HelloWorld",
method: "getGridDetails",
result: [
{slNo:2, name:"patton"},
{slNo:3, name:"Omar N Bradely"},
{slNo:1, name:"Sam Manekshaw"}
],
tid: 1,
type: "rpc"
The problem is that I am not able to load data in to the grid i.e, The direct method HelloWorld.getGridDetails is not at all getting called when the grid is displayed. Am I missing something? Can anyone of you please help?
Thanks
Kumar

Answer 1

I actually figured out the solution for this. Though it doesnt make sense now, better late than never. I need to modify the following in the index.html
<script type="text/javascript" src="Api.js"></script>
**<script type="text/javascript">Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);</script>**
<script type="text/javascript" src="index.js"></script>
After adding
<script type="text/javascript">Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);</script>
before index.js. It started working.