PDA

View Full Version : 3.3.1 Grid in Accordian - Error between Website (HTTP) and Project (File Path)



SparklyB
31 Jan 2011, 2:01 PM
Hi,

When trying to run the code below from a Visual Studio Web Site, I get the following error:



unterminated string literal
tyle'] == undefined ? '' : values['ist... class="x-grid3-sort-icon" src="ExtJS

ext-all-debug.js (line 5835)


I pick up this error in Firebug and the Handler file is called and returns a JSON object.

However, when I run the exactly the same code from a normal project which is associated to a file path not a virtual directory (which runs in the ASP.NET development server) it works correctly and my grid is displayed.

Can anyone help?

The code to replicate the problem is:
.htm


<html>
<head>
<title>Database</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<script src="ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ExtJS/ext-all-debug.js" type="text/javascript"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "ExtJS\resources\images\default\s.gif";

Ext.onReady(function () {

var opStore = new Ext.data.JsonStore({
root: "rows",
autoLoad: true,
fields: [ 'lId', 'zTitle', 'zFName', 'zLName', 'lAge'],
baseParams: {searchText: ""},
proxy: new Ext.data.HttpProxy({ //create proxy to handler
url: "UserData.ashx"
}),
sortInfo: {
field: 'lAge',
direction: 'ASC'
}
});

var renderName = function(zValue, zIndex, opRecord) {
return zValue + " " + opRecord.data.zFName + " " + opRecord.data.zLName;
};

var refreshUserGrid = function() {
var grid = Ext.getCmp("GridPanel1");
grid.el.mask("Refreshing", "x-mask-loading");

opStore.load({callback: function() {
grid.el.unmask();
}
});
};

var searchUserGrid = function() {
var grid = Ext.getCmp("GridPanel1");
grid.el.mask("Refreshing", "x-mask-loading");

opStore.load({
params: {
searchText:Ext.getCmp("txtSearchText").getValue()
},
callback: function() {
grid.el.unmask();
}
});
};

var opToolbar = new Ext.Toolbar({
items: [
{
xtype: "button",
text: "Add"
},
'-',
{
xtype: "button",
text: "Refresh",
handler: refreshUserGrid
},
'->',
{
xtype: "textfield",
id:"txtSearchText"
},
{
xtype: "button",
text: "Search",
handler: searchUserGrid
}
]
});

var opGrid = new Ext.grid.GridPanel({
id: "GridPanel1",
tbar: opToolbar,
border: false,
frame:false,
store: opStore,
stripeRows:true,
autoHeight:true,
autoExpandColumn:"colName",
loadMask:true,
columns: [
{
header: "Name",
dataIndex:"zTitle",
id:"colName",
renderer:renderName
},
{
header: "Age",
dataIndex:"lAge",
width:25
}
],
viewConfig: {
forceFit: true,
},
selModel: new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
rowselect: {
fn: function(selModel, index, record){
Ext.Msg.alert("Title", record.data.fName);
}
}
}
})
});


var opViewport = new Ext.Viewport({
layout: "border",
renderTo: Ext.getBody(),
title: "title",
items: [
{
region: "center",
xtype: "panel",
title: "Center"
},
{
region: "west",
xtype: "panel",
layout: "accordion",
id:"pnlWest",
title: "West",
width: 400,
split: true,
minSize: 75,
maxSize: 600,
autoScroll:true,
collapsible: true,
collapseMode: "mini",
layoutConfig: {
titleCollapse: true,
animate: true,
activeOnTop: false
},
items: [
{
title: "Grid",
layout:"fit",
border: false,
items: opGrid
},
{
title: "Tree",
layout:"fit"
},
{
title:"Another section",
html:"Another section will go here..."
}
]
},
{
region: "south",
xtype: "panel",
split: true,
title: "South",
height: 150,
collapsible: true,
collapseMode: "mini"
}
]
});
});
</script>


</head>
<body></body>
</html>


UserData.ashx


<%@ WebHandler Language="C#" Class="UserData" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using test;
using System.Linq;

public class UserData : IHttpHandler {

public void ProcessRequest(HttpContext context)
{
//Get the user data
List<Person> opResult = GetUserData();
string zpSearchText = String.Empty;

//If search text has been entered, then filter the results
if (context.Request["SearchText"] != null)
{
zpSearchText = context.Request["SearchText"].ToString().ToLower();

var q = from s in opResult
where s.zFName.ToLower().Contains(zpSearchText) || s.zLName.ToLower().Contains(zpSearchText) || s.zTitle.ToLower().Contains(zpSearchText)
select s;

opResult = new List<Person>(q);

}

context.Response.ContentType = "text/json";
JavaScriptSerializer opJson = new JavaScriptSerializer();
string zpJson = opJson.Serialize(opResult);

context.Response.Write(String.Format("{{'rows':{0}}}", zpJson));
}

/// <summary>
/// Returns a list of person objects
/// </summary>
/// <returns></returns>
private List<Person> GetUserData()
{
List<Person> opResult = new List<Person>();

Person opPerson = new Person(1, "Miss", "Beth", "Chubb", 28);
opResult.Add(opPerson);

opPerson = new Person(2, "Miss", "Jennie", "Chubb", 31);
opResult.Add(opPerson);

opPerson = new Person(3, "Mr", "James", "Spurr", 28);
opResult.Add(opPerson);

opPerson = new Person(4, "Mrs", "Rose", "Morris", 58);
opResult.Add(opPerson);

opPerson = new Person(5, "Mr", "Jim", "King", 57);
opResult.Add(opPerson);

return opResult;
}

public bool IsReusable {
get {
return false;
}
}

}


Person.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for Person
/// </summary>
namespace test
{
public class Person
{
public int lID;
public string zTitle;
public string zFName;
public string zLName;
public int lAge;
public Person()
{

}

public Person(int id, string title, string fname, string lname, int age)
{
lID = id;
zTitle = title;
zFName = fname;
zLName = lname;
lAge = age;
}
}
}

SparklyB
3 Feb 2011, 7:54 AM
Can anyone help with this or recommend the best way to create a Visual Studio project to use with ExtJS?

Thanks in advance