cannot get extjs grid to populate with proxy data call

Question

I have gone from incorporating extjs in my original asp.net application which worked when hardcoding any data stores and binding them to the charts/grids. When I tried proxy url calls or even fetching the data from code behind and wrapping in json I still do not get the data into the grid. So I gave up and went with extjs and nodejs and still using mongodb; this worked perfectly but I still have to learn to create a better UI using express/jade etc which is a different project now. But then I came across using MVC with extjs and with a sample project tried the same thing (the sample had hardcoded data) and I cannot for the life of me get it to display the data.

 Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
 ]);

Ext.onReady(function () {
Ext.QuickTips.init();

// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
         { name: 'username', type: 'string' }
  ]
});

Ext.define('UserStore', {
    extend: 'Ext.data.Store',
    model: 'User',
    autoload: true,
    proxy: {
        type: 'ajax',
        url: '/dashboard.aspx/getDBData',
        reader: {
            type: 'json',
            root: 'users'
        },
        listeners:
        {
            exception: function (proxy, response, operation) {
                Ext.MessageBox.show(
                {
                    title: 'REMOTE EXCEPTION',
               msg: operation.getError(), icon: Ext.MessageBox.ERROR, buttons: Ext.Msg.OK
                });
            }
        }
    }

});

var myStore = Ext.getStore('UserStore');

the url I am including here is the codebehind function that I initially tried which accesses the mongodb and returns json result. Not working. Now from the extjs node.js application I have results coming into localhost:3000/userlist which returns a list from mongodb and displays it as follows:

extends layout

block content
h1.
  User List
 u1
 each user, i in userlist
    li
       a(href="mailto:#{user.email}")= user.username

Now would it be possible to use the same server and call the base url and then change the route.js file to return the mongodb json result or call the mongodb localhost:27017 and get a result. Really confused here

exports.index = function(db) {
 return function(req, res) {
 var collection = db.get('usercollection');
 collection.find({},{}, function(e,docs){
      res.render('userlist', {
           "userlist" : docs
      });
 });

}; };

EDIT:

First thing I realized from asp.net perspective was that I was not calling a webservice just a codebehind method. Any comments will still be appreciated.

EDIT 2:

   {"connTime":null,"userName":"101591196589145","clientName":null,
     "feedUrl":null,"dconnTime":null,"errMessage":null,"ip":null}

I couldn't quite catch your problem. Can you please clarify a little? Try to explain the issue in a couple of lines. — third_eye
Sorry. What I am trying to get help with is to populate extjs controls i.e. a grid and chart. I am trying to call the data from a mongo db. For some reason the store never gets populated when trying in the original application. — vbNewbie
Does the Ajax call happens? What does it return? Is your response data in correct JSON format? — third_eye
I finally got the ajax webservice call to work and I see response in json. please see EDIT above — vbNewbie

rmolds rmolds · Accepted Answer · 2014-01-16T20:07:51

You have identified a root in your store as 'users' reader: { type: 'json', root: 'users' },

But there is no root in your returned json such as: {"users":[{"connTime":null,"userName":"101591196589145","clientName":null, "feedUrl":null,"dconnTime":null,"errMessage":null,"ip":null}]}

cannot get extjs grid to populate with proxy data call

1 Answers