PDA

View Full Version : Grid is not populating if used XML file as a data strore



yogeshgpt
29 Nov 2011, 6:06 AM
Hi,

I am trying to load xml data into a grid but is showing 'Loading' image. Here is the same code -



var userStore = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
proxy: {
//loading using Ajax
type: 'ajax',
url: 'userinfo.xml',
//return will be xml so lets setup a reader
reader: {
type: 'xml',
//Records will have item tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '@total'
}
}


});






// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: userStore,
columns: [
{ text: "Id", width: 50, dataIndex: 'Id', sortable: true },
{ text: "Name", width: 100, dataIndex: 'Name', sortable: true },
{ text: "Address", flex: 1, dataIndex: 'Address', sortable: true }
],
width: 400,
height: 210,
title: 'Application Users',
renderTo: 'example-grid'
});


XML file is also in the same folder. Can someone please let me know what I am missing?

Thanks

mitchellsimoens
29 Nov 2011, 7:10 AM
Is your Store getting the XML and mapping it correctly? Are there any errors? Hard to tell you if your Store is setup, can we see the XML?

yogeshgpt
29 Nov 2011, 9:44 AM
Here is the xml I am using -



<?xml version="1.0" encoding="utf-8" ?>
<ItemSearchResponse>
<Items>
<Item>
<ASIN>0446355453</ASIN>
<ItemAttributes>
<Id>1</Id>
<Name>User 1</Name>
<Address>Address 1</Address>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446613657</ASIN>
<ItemAttributes>
<Id>2</Id>
<Name>User 2</Name>
<Address>Address 2, Hyderabad</Address>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446357421</ASIN>
<ItemAttributes>
<Id>3</Id>
<Name>User 3</Name>
<Address>Malviya Nagar, Jaipur</Address>
</ItemAttributes>
</Item>
</Items>
</ItemSearchResponse>


Here is the complete code of my JS file -



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




Ext.onReady(function () {


Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', mapping: 'ItemAttributes > Id' },
'Name', 'Address'
]
});



var userStore = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
proxy: {
//loading using Ajax
type: 'ajax',
url: 'userinfo.xml',
//return will be xml so lets setup a reader
reader: {
type: 'xml',
//Records will have item tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '@total'
}
}


});






// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: userStore,
columns: [
{ text: "Id", width: 50, dataIndex: 'Id', sortable: true },
{ text: "Name", width: 100, dataIndex: 'Name', sortable: true },
{ text: "Address", flex: 1, dataIndex: 'Address', sortable: true }
],
width: 400,
height: 210,
title: 'Application Users',
renderTo: 'example-grid'
});




});