Grid, HTTP Proxy, JS and ASPX on IIS.

[ferr]

I'm trying to retrieve data from an aspx file which is in the same virtual directory as my other files (my grid's js file and my html presentation file). I have been using HttpProxy to open the aspx file, but it for some reason doesn't populate my Grid with any data. With a couple of line changes (switching the URL and switching to ScriptTagProxy) I am able to fill the Grid with the same exact data from a different source and proxy. Where am I going wrong with using the aspx file on my own server?

In Firebug, with HttpProxy and the url pointing to the aspx file within my virtual directory, I get all of the data listed in Console->Post->Response, but the Grid is empty.

Here is the most relevant code. Note the commented url, it's from the Paging tutorial and when switched in with ScriptTagProxy in use it loads fine. The Json formatted data being read from the aspx file on my server is a copy/paste of the data from that page.

var cm = new Ext.grid.ColumnModel([
	{header: "Title", width: 120, sortable:true, dataIndex: 'title', editor: new Ed(new fm.TextField({allowBlank: false}))},
	{header: "Last Updated", sortable:true, width: 120, 
		renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
                    dataIndex: 'lastPost'}
	]);	
	cm.defaultSortable=true;
	
	// create the Data Store
    var ds = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
            //url: 'http://extjs.com/forum/topics-remote.php'
            url: 'connect_test.aspx'
        }),

        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'post_id'
        }, [
            {name: 'title', mapping: 'topic_title'},
            {name: 'author', mapping: 'author'},
            {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
            {name: 'excerpt', mapping: 'post_text'}
        ]),

        // turn on remote sorting
        remoteSort: true
    });

[fay]

There doesn't seem anything obviously wrong with your code. Post the response from connect_test.aspx and how you are setting up your grid (along with any relevant HTML).

Also check the execute permissions on your IIS virtual directory.

[ferr]

There doesn't seem anything obviously wrong with your code. Post the response from connect_test.aspx and how you are setting up your grid (along with any relevant HTML).

Also check the execute permissions on your IIS virtual directory.

Response from connect_test.aspx on my server:

{"totalCount":"65682","topics":[{"post_id":"69316","topic_title":"Woot! 2.5 working days and i've completed one web app to ext2.0a1","topic_id":"14253","author":"devnull","post_time":"1191432751","post_text":"Wow, that is very impressive. Tho i think i am more impressed by the app itself than the comparison, makes my apps look like nothing ;) Did you make ...","forum_title":"Open Discussion","forumid":"6","reply_count":"1"}]}

It's an editable, resizable, paging grid:

    // create the editor grid
    var grid = new Ext.grid.EditorGrid('topic-grid', {
        ds: ds,
        cm: cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
        enableColLock:false,
        loadMask: true
    });

    // make the grid resizable, do before render for better performance
    var rz = new Ext.Resizable('topic-grid', {
        wrap:true,
        minHeight:100,
        pinned:true,
        handles: 's'
    });
    rz.on('resize', grid.autoSize, grid);

    // render it
    grid.render();

    var gridFoot = grid.getView().getFooterPanel(true);

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 5,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display"
    });

    // trigger the data store load
    ds.load({params:{start:0, limit:5}});
    
	Ext.get('topic-grid').show();

The html is extremely simplified at the moment as I am still hacking away at one of the tutorial examples:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Introduction to Ext: Starter Page</title>

    <!-- Include YUI utilities and Ext: -->
    <script type="text/javascript" src="../adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../adapter/yui/ext-yui-adapter.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="ExtStart.js"></script>

    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="../resources/css/ytheme-vista.css">
    <link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
	<h1>Introduction to Ext: Starter Page</h1>

	<p>This is the starter page that accompanies the Introduction to Ext tutorial located at <a href="http://www.extjs.com/tutorial/introduction-ext">http://www.extjs.com/tutorial/introduction-ext</a>.</p>

	<p>This page is intended to help you interactively explore some of the capabilities of the Ext library, so please make sure that your script references are correct.  This page assumes by default that it is in a directory directly beneath the root Ext deployment directory.  For example, if your Ext directory structure is located at "C:\code\Ext\v1.0\," then this file should be saved in a directory like "C:\code\Ext\v1.0\tutorial\."  If you choose to locate this file somewhere else, then make sure you change the script references of this file as needed.</p>

	<p>If you have any questions or issues getting this tutorial to work correctly, please stop by the <a href="http://www.extjs.com/forums/">Ext Forums</a> and ask for help!</p>

	<div id="myDiv">This is a test div.</div>

	<input type="button" id="myButton" value="My Button" />

	<div id="topic-grid" style="position:absolute; left: 100px; overflow: hidden; width: 575px; height: 225px;border:2px solid #999;margin:0px;visibility:hidden;"></div>

</body>
</html>

Execute permissions = scripts only. Is that sufficient?

[fay]

"Execute Permission = script only" is fine.

Sorry, I'm at a bit of a loss here as the following works for me:

<script>
Ext.onReady(function(){

  var fm = Ext.form;
  var Ed = Ext.grid.GridEditor;
  
  var cm = new Ext.grid.ColumnModel([
    {header: "Title", width: 120, sortable:true, dataIndex: 'title', editor: new Ed(new fm.TextField({allowBlank: false}))},
    {header: "Author", width: 120, sortable:true, dataIndex: 'author'},
    {header: "Last Updated", sortable:true, width: 120, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastPost'}
  ]);	
  cm.defaultSortable = true;
	
  // create the Data Store
  var ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: './GetJSONData.aspx'}),
    reader: new Ext.data.JsonReader({
      root: 'topics',
      totalProperty: 'totalCount',
      id: 'post_id'
    }, [
      {name: 'title', mapping: 'topic_title'},
      {name: 'author', mapping: 'author'},
      {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
      {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
      {name: 'excerpt', mapping: 'post_text'}
    ]),

    // turn on remote sorting
    remoteSort: true
  });
  
  // create the editor grid
  var grid = new Ext.grid.EditorGrid('topic-grid', {ds: ds, cm: cm, selModel: new Ext.grid.RowSelectionModel({singleSelect:true}), enableColLock:false, loadMask: true});

  // make the grid resizable, do before render for better performance
  var rz = new Ext.Resizable('topic-grid', {wrap:true, minHeight:100, pinned:true, handles: 's'});
  rz.on('resize', grid.autoSize, grid);

  // render it
  grid.render();

  var gridFoot = grid.getView().getFooterPanel(true);

  // add a paging toolbar to the grid's footer
  var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: 5, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display"
  });

  ds.load({params:{start:0, limit:5}});
      
  Ext.get('topic-grid').show();  
});
</script>

</head>
<body>
<div id="topic-grid" style="position:absolute; left: 100px; overflow: hidden; width: 575px; height: 225px;border:2px solid #999;margin:0px;visibility:hidden;"></div>
</body>
</html>

GetJSONData.aspx:

<%
  Response.ContentType = "text/plain"

  Dim ResponseJSON = "{'totalCount':'1123','topics':[{'post_id':'69316','topic_title':'Woot! 22.5 working days and ive completed one web app to ext2.0a1','topic_id':'14253','author':'devnull','post_time':'1191432751','post_text':'Wow, that is very impressive. Tho i think i am more impressed by the app itself than the comparison, makes my apps look like nothing ;) Did you make ...','forum_title':'Open Discussion','forumid':'6','reply_count':'1'}]}"

  Dim ResponseJSON1 = "{""totalCount"":""1123"",""topics"":[{""post_id"":""69316"",""topic_title"":""Woot! 22.5 working days and i've completed one web app to ext2.0a1"",""topic_id"":""14253"",""author"":""devnull"",""post_time"":""1191432751"",""post_text"":""Wow, that is very impressive. Tho i think i am more impressed by the app itself than the comparison, makes my apps look like nothing ;) Did you make ..."",""forum_title"":""Open Discussion"",""forumid"":""6"",""reply_count"":""1""}]}"
  
  Response.Write(ResponseJSON1)
%>

Both ResponseJSON and ResponseJSON1 work fine... Could it be your Response.ContentType? Was the JSON you previously posted taken from your ASPX or FireBug's Console | Response tab?

[ferr]

It was from the Firebug response tab.

One thing that's different is that I used C# server-side scripting to send the data.. google tells me [I]ASP.Net C# syntax

[shibubh]

HEY Ferr r u sure you response the correct json data. i think the problem is in your json data. Check it from the firebug and view the response and in my view the best option for generating the json data using C#(asp.net) is
javaScriptSerializer class which is in System.Web.Script.Serialization; namespace. But need MS atlas install in your computer.

[ferr]

How can I determine from Firebug's response whether it is correctly formatted Json or not? It looks just like it does as if I opened the aspx file in a browser.

I tried application/json and text/plain, neither made a difference it seems.

I tried out the JavaScriptSerializer class and got the same result.

Check out my aspx code, maybe there's just something silly in there:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
      System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();
      
      
      //Response.ContentType = "application/json";

          string data;
          
          data = "{\"totalCount\":\"65682\",\"topics\":[{\"post_id\":\"69316\",\"topic_title\":\"Woot! 2.5 working days and i've completed one web app to ext2.0a1\",\"topic_id\":\"14253\",\"author\":\"devnull\",\"post_time\":\"1191432751\",\"post_text\":\"Wow, that is very impressive. Tho i think i am more impressed by the app itself than the comparison, makes my apps look like nothing ;)\r\nDid you make ...\",\"forum_title\":\"Open Discussion\",\"forumid\":\"6\",\"reply_count\":\"1\"}]}";

          Response.Write(jss.Serialize(data));
          
          Response.End();
  }
</script>

[ferr]

Actually I take that back about the javascriptserializer looking the same, it now contains the escape characters I used to include the quotes within the string. This shows up when viewing the aspx file in the browser as well as when looking into the Firebug response. Maybe there's a conflict on that level.

I replaced all " with ' to get rid of escape characters, but not only did that not work, Firebug's response shows that it replaced ' with another escape character.

I switched out my aspx code with Fay's response code and that one is able to populate the grid..

Looking at everything in the Firebug console to compare between the non-working aspx code and the working, I cannot see any differences at all. Header reports back the same content type of plain/text, the response text is identical in format..

[fay]

Ferr, did you try my working code (including GetJSONData.aspx) to rule out if it was a permissions issue or not?

EDIT: Just read your last line!!

[ferr]

OK, it works now. There was another escape character issue that was overlooked.

I did a side-by-side comparison with your input vs mine:

          data = "{'totalCount':'1122','topics':[{'post_id':'69317','topic_title':'Woot! 22.5 working days and i've completed one web app to ext2.0a1','topic_id':'14253','author':'devnull','post_time':'1191432751','post_text':'Wow, that is very impressive. Tho i think i am more impressed by the app itself than the comparison, makes my apps look like nothing ;) Did you make ...','forum_title':'Open Discussion','forumid':'6','reply_count':'1'}]}";
          data = "{'totalCount':'1122','topics':[{'post_id':'69317','topic_title':'Woot! 22.5 working days and ive completed one web app to ext2.0a1','topic_id':'14253','author':'devnull','post_time':'1191432751','post_text':'Wow, that is very impressive. Tho i think i am more impressed by the app itself than the comparison, makes my apps look like nothing ;) Did you make ...','forum_title':'Open Discussion','forumid':'6','reply_count':'1'}]}";

Note there are two differences in my data (the top one) that cause it to not show up in the grid: 1) the apostrophe used in one of the sentences and 2) the \r\n escape characters.
Removal of those allows it to populate the grid.