capuser
5 Oct 2007, 1:04 AM
Hello,
I am new to extjs and I am trying to have a grid reading data given as xml by an aspx page.
I have the following code (xmlreader part only) in my js file:
var Example = {
init : function() {
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'http://localhost/Adaptive/Table/SampleAdaptiveXMLData.aspx'}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "T4" tag
record: 'User',
id: 'ID',
totalRecords: "recCount"
}, [
// set up the fields mapping into the xml doc
'FirstName', 'LastName', 'Age','BirthDate'
]),
// turn on remote sorting
remoteSort: true
});
ds.setDefaultSort('LastName', 'desc');
var cm = new Ext.grid.ColumnModel([{
header: "First Name",
dataIndex: 'FirstName',
width: 120
},{
header: "Last Name",
dataIndex: 'LastName',
width: 120
},{
header: "Age",
dataIndex: 'Age',
width: 40
},{
header: "Date of Birth",
dataIndex: 'BirthDate',
width: 100
}]);
// by default columns are sortable
cm.defaultSortable = true;
// create the editor grid
var grid = new Ext.grid.Grid('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 users {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
// trigger the data store load
ds.load({params:{start: 0, limit: 5}});
}
};
Ext.onReady(Example.init, Example);
The response from the SampleAdaptiveXMLData.aspx is the following (it is a test obviously...):
<UserList>
<User>
<ID>1</ID>
<recCount>300</recCount>
<FirstName>1 first Name</FirstName>
<LastName>1ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>1</Age>
<BirthDate>04/10/2007</BirthDate>
</User>
<User>
<ID>2</ID>
<recCount>300</recCount >
<FirstName>2 first Name</FirstName>
<LastName>2ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>2
< /Age>
<BirthDate>03/10/2007</BirthDate>
</User>
<User>
<ID>3</ID>
<recCount>300</recCount>
<FirstName>3 first Name</FirstName>
<LastName>3ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>3</Age>
<BirthDate>02/10 /2007</BirthDate>
</User>
<User>
<ID>4</ID>
<recCount>300</recCount>
<FirstName>4 first Name</FirstName>
<LastName >4ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>4</Age>
<BirthDate>01/10/2007</BirthDate>
</User>
<User>
<ID>5</ID>
<recCount>300</recCount>
<FirstName>5 first Name</FirstName>
<LastName>5ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>5</Age>
<BirthDate>30/09/2007</BirthDate>
</User>
</UserList>
My problem is that when the XMLreader is reading the response, an exception is thrown in the XMLreader.read function at this place:
var doc = response.responseXML;
if(!doc) {
throw {message: "XmlReader.read: XML Document not available"};
}
I don't manage to fixe this. Anybody would have a suggestion of what I am doing wrong?
Thanks in advance.
I am new to extjs and I am trying to have a grid reading data given as xml by an aspx page.
I have the following code (xmlreader part only) in my js file:
var Example = {
init : function() {
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'http://localhost/Adaptive/Table/SampleAdaptiveXMLData.aspx'}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "T4" tag
record: 'User',
id: 'ID',
totalRecords: "recCount"
}, [
// set up the fields mapping into the xml doc
'FirstName', 'LastName', 'Age','BirthDate'
]),
// turn on remote sorting
remoteSort: true
});
ds.setDefaultSort('LastName', 'desc');
var cm = new Ext.grid.ColumnModel([{
header: "First Name",
dataIndex: 'FirstName',
width: 120
},{
header: "Last Name",
dataIndex: 'LastName',
width: 120
},{
header: "Age",
dataIndex: 'Age',
width: 40
},{
header: "Date of Birth",
dataIndex: 'BirthDate',
width: 100
}]);
// by default columns are sortable
cm.defaultSortable = true;
// create the editor grid
var grid = new Ext.grid.Grid('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 users {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
// trigger the data store load
ds.load({params:{start: 0, limit: 5}});
}
};
Ext.onReady(Example.init, Example);
The response from the SampleAdaptiveXMLData.aspx is the following (it is a test obviously...):
<UserList>
<User>
<ID>1</ID>
<recCount>300</recCount>
<FirstName>1 first Name</FirstName>
<LastName>1ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>1</Age>
<BirthDate>04/10/2007</BirthDate>
</User>
<User>
<ID>2</ID>
<recCount>300</recCount >
<FirstName>2 first Name</FirstName>
<LastName>2ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>2
< /Age>
<BirthDate>03/10/2007</BirthDate>
</User>
<User>
<ID>3</ID>
<recCount>300</recCount>
<FirstName>3 first Name</FirstName>
<LastName>3ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>3</Age>
<BirthDate>02/10 /2007</BirthDate>
</User>
<User>
<ID>4</ID>
<recCount>300</recCount>
<FirstName>4 first Name</FirstName>
<LastName >4ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>4</Age>
<BirthDate>01/10/2007</BirthDate>
</User>
<User>
<ID>5</ID>
<recCount>300</recCount>
<FirstName>5 first Name</FirstName>
<LastName>5ln_st0_lim_5_dir_DESC_sort_LastName</LastName>
<Age>5</Age>
<BirthDate>30/09/2007</BirthDate>
</User>
</UserList>
My problem is that when the XMLreader is reading the response, an exception is thrown in the XMLreader.read function at this place:
var doc = response.responseXML;
if(!doc) {
throw {message: "XmlReader.read: XML Document not available"};
}
I don't manage to fixe this. Anybody would have a suggestion of what I am doing wrong?
Thanks in advance.