PDA

View Full Version : XML Grid Problem



busybee
5 Oct 2010, 3:05 PM
Hello,
I am trying to build a simple grid. But I am encountering a null exception.



/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/

Ext.onReady(function(){

var reader = new Ext.data.XmlReader({
record: "State"},
[{name: "Id", mapping: "@Id"},
{name:"Name", mapping: "@Name"},
{name:"email", mapping: "@email"}
]


/*record:"District"}, [{
name: "cId", mapping: "@Id"},
{name:"CustomerName", mapping: "@CustomerName"}

]

*/
);

var store = new Ext.data.Store({
// Load data at once
autoLoad: true,
reader:reader,
url: "test.xml"

});

var colModel = new Ext.grid.ColumnModel([
{header: "Id", width: 120, dataIndex: "Id", sortable: true},
{header: "Name", width: 180, dataIndex: "Name", sortable: true},
{header: "email", width: 115, dataIndex: "email", sortable: true},

/*{header: "cId", width: 120, dataIndex: "cId", sortable: true},
{header: "CustomerName", width: 180, dataIndex: "CustomerName", sortable: true}
*/
]); // end of colmodel

//alert(store.value);
alert(colModel.value);

var grid = new Ext.grid.GridPanel("mygrid", {
ds: store,
cm: colModel
}); // end of grid

grid.render();
dataStore.load();

}); // End of Ext.onReady()


Sample XML


<State Id="1" Name="John" email="[email protected]" >
<City Id="501" CustomerName="Darryl" />
<City Id="502" CustomerName="Kai" />
</State>
<State Id="1" Name="John" email="[email protected]" >
<City Id="501" CustomerName="Darryl" />
<City Id="502" CustomerName="Kai" />
</State>


Observations: I have similar multiple child nodes for each parent element and also multiple attributes for each element.
Browser was throwing me off at the red colored code. I am trying to figure out where I am going wrong in this.
Any help is appreciated.

Condor
6 Oct 2010, 1:20 AM
Your XML is invalid. An XML document can only have ONE element as the root (you could wrap your <State> elements inside a single <States> element).

Are you loading the XML file from a server or from your local filesystem (which isn't supported!).

busybee
6 Oct 2010, 4:37 AM
Your XML is invalid. An XML document can only have ONE element as the root (you could wrap your <State> elements inside a single <States> element).

Are you loading the XML file from a server or from your local filesystem (which isn't supported!).

Condor

Yes, <State> Element is inside <States> element in the xml document. I haven't posted the whole document.
XML document is coming from a server, But I am initially testing with a sample from local machine. Once I get this too work,
I can add a Httpproxy and change the url.

Howcome the XML file from local system is not supported, when the grid examples being shown are from local machine, and they worked for me.

Condor
6 Oct 2010, 5:02 AM
XmlHttpRequest to the local filesystem isn't supported (there are patches to make Ext support it on current browsers, but upcoming browsers actually don't allow it anymore due to security reasons).

If you are using XmlHttpRequests then you need to host your application on a HTTP server.

busybee
6 Oct 2010, 10:43 AM
Hi,

I am still encountering problems in rendering a grid :( I am trying to render the xml elements into the grid. I tried putting in another xmlreader for child elements but could'nt get to work. Right now I am trying to atleast display the parent elements. Any help is appreciated.
HTML Code:


<html>
<head>
<title> Getting started with ExtJS </title>
<link rel="stylesheet" type="text/css"
href="http://localhost/lib/ext-3.2.1/resources/css/ext-all.css"/>
<script src="http://localhost/lib/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script src="http://localhost/lib/ext-3.2.1/ext-all-debug.js"></script>


<script type="text/javascript" src="http://localhost/grid.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/lib/ext-3.2.1/examples/grid/grid-examples.css" />
</head>

<body>
Testing extjs

<div id="example-grid"></div>

</body>
</html>



XML File


<?xml version="1.0" encoding="utf-8" ?>
<States>
<State Id="1" Name="John" email="[email protected]" Zipcode="12345">
<City Id="501" CustomerName="Darryl" Zipcode="12345" />
<City Id="502" CustomerName="Kai" Zipcode="12345" />
</State>
<State Id="1" Name="John" email="[email protected]" Zipcode="67890" >
<City Id="501" CustomerName="Darryl" Zipcode="67890" />
<City Id="502" CustomerName="Kai" Zipcode="67890" />
</State>
</States>


Javascript Code:



Ext.onReady(function(){



// create the Data Store

var store = new Ext.data.Store({

// load using HTTP

url: 'test.xml',


// the return will be XML, so lets set up a reader


reader: new Ext.data.XmlReader({


record: 'State',


fields: [
// set up the fields mapping into the xml doc

// The first needs mapping, the others are very basic

{name: 'Id', mapping: '@Id'},

{name:"Name", mapping: "@Name"},
{name:"email", mapping: "@email"}
,
{name:"zipcode", mapping: "@zipcode"}

])

});



// create the grid

var grid = new Ext.grid.GridPanel({

store: store,

columns: [

{header: "Id", width: 120, dataIndex: "Id", sortable: true},
{header: "Name", width: 180, dataIndex: "Name", sortable: true},
{header: "email", width: 115, dataIndex: "email", sortable: true},
{header: "zipcode", width: 120, dataIndex: "zipcode", sortable: true}

],


renderTo:'example-grid',

width:540,

height:200


});



store.load();

});

Condor
6 Oct 2010, 10:43 PM
1. The mapping for zipcode is wrong.
2. Did you check with Firebug (or Fiddler2 etc.) that the request is made and the server sends the correct response?

busybee
7 Oct 2010, 2:43 AM
1. The mapping for zipcode is wrong.
2. Did you check with Firebug (or Fiddler2 etc.) that the request is made and the server sends the correct response?

Condor,

Thanks for your help. I got the basic grid to be rendered with the State element. Yes I figured that my zipcode mapping is wrong. I am trying to as well display the child element (City) in the same grid. I tried adding a new store with another xmlreader and then added the store into the grid panel. I couldn't get that to work. I commented that part in the below code. Can you please tell me how do I this, or where I am going wrong in my code.



Ext.onReady(function(){

// create the Data Store

var store = new Ext.data.Store({

// load using HTTP
url: 'test.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
record: 'State'
},

[

// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic

{name: 'Id', mapping: '@Id'},
{name:"Name", mapping: "@Name"},
{name:"email", mapping: "@email"},
{name:"zipcode", mapping: "@Zipcode"}
])
});

/*var store2 = new Ext.data.Store({

// load using HTTP
url: 'test.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
record: 'City'
},

[

// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic

{name: 'cId', mapping: '@Id'},
{name:"CustomerName", mapping: "@CustomerName"},
{name:"cityzip", mapping: "@Zipcode"}
])
});

*/

// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
//store2,

columns: [
{header: "Id", width: 120, dataIndex: "Id", sortable: true},
{header: "Name", width: 180, dataIndex: "Name", sortable: true},
{header: "email", width: 115, dataIndex: "email", sortable: true},
{header: "zipcode", width: 120, dataIndex: "zipcode", sortable: true}
/*{header: "cId", width: 120, dataIndex: "cId", sortable: true}
{header: "CustomerName", width: 120, dataIndex: "CustomerName", sortable: true}
{header: "cityzip", width: 120, dataIndex: "cityzip", sortable: true}*/

],

renderTo:'example-grid',
width:540,
height:200
});

store.load();
//store2.load();
});

Condor
7 Oct 2010, 3:02 AM
How exactly are you planning on displaying this data?

Flattened (one record for every city extended with the user details) or hierarchical (grids can't do that - you would need a tree for that).

busybee
7 Oct 2010, 3:14 AM
How exactly are you planning on displaying this data?

Flattened (one record for every city extended with the user details) or hierarchical (grids can't do that - you would need a tree for that).

Yes Flattened. For each row displaying the City row, I would display the State elements. So the State elements would pretty much be repeating.
I can use a tree, but I am not sure, how do I display a tree with all the elements like a grid embedded.

Condor
7 Oct 2010, 3:22 AM
In that case I recommend using:

reader: new Ext.data.JsonReader({
root: 'City',
fields: [
{name: 'CityId', mapping: '@Id'},
{name: 'CustomerName', mapping: '@CustomerName'},
{name: 'CityZipcode', mapping: '@Zipcode'},
{name: 'StateId', convert: function(v, n){
return Ext.DomQuery.selectValue('@Id', n.parentNode);
}},
{name: 'Name', convert: function(v, n){
return Ext.DomQuery.selectValue('@Name', n.parentNode);
}},
{name: 'email', convert: function(v, n){
return Ext.DomQuery.selectValue('@email', n.parentNode);
}},
{name: 'StateZipcode', convert: function(v, n){
return Ext.DomQuery.selectValue('@Zipcode', n.parentNode);
}}
]
})
Disclaimer: Completely untested code!

busybee
7 Oct 2010, 3:44 AM
In that case I recommend using:

reader: new Ext.data.JsonReader({
root: 'City',
fields: [
{name: 'CityId', mapping: '@Id'},
{name: 'CustomerName', mapping: '@CustomerName'},
{name: 'CityZipcode', mapping: '@Zipcode'},
{name: 'StateId', convert: function(v, n){
return Ext.DomQuery.selectValue('@Id', n.parentNode);
}},
{name: 'Name', convert: function(v, n){
return Ext.DomQuery.selectValue('@Name', n.parentNode);
}},
{name: 'email', convert: function(v, n){
return Ext.DomQuery.selectValue('@email', n.parentNode);
}},
{name: 'StateZipcode', convert: function(v, n){
return Ext.DomQuery.selectValue('@Zipcode', n.parentNode);
}}
]
})
Disclaimer: Completely untested code!

Thanks Condor. I liked your Disclaimer part. But couldn't get to display the data in the grid. How do people debug javascript or extjs, in the sense that how do I get to know what values are getting into those fields, and when each function is called.



Ext.onReady(function(){

// create the Data Store

var store = new Ext.data.Store({

// load using HTTP
url: 'test.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.JsonReader({
root: 'City',
fields: [
{name: 'CityId', mapping: '@Id'},
{name: 'CustomerName', mapping: '@CustomerName'},
{name: 'CityZipcode', mapping: '@Zipcode'},
{name: 'StateId', convert: function(v, n){
return Ext.DomQuery.selectValue('@Id', n.parentNode);
}},
{name: 'Name', convert: function(v, n){
return Ext.DomQuery.selectValue('@Name', n.parentNode);
}},
{name: 'email', convert: function(v, n){
return Ext.DomQuery.selectValue('@email', n.parentNode);
}},
{name: 'StateZipcode', convert: function(v, n){
return Ext.DomQuery.selectValue('@Zipcode', n.parentNode);
}}
]
})
});

// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
//store2,

columns: [
{header: "Id", width: 120, dataIndex: "StateId", sortable: true},
{header: "Name", width: 180, dataIndex: "Name", sortable: true},
{header: "email", width: 115, dataIndex: "email", sortable: true},
{header: "zipcode", width: 120, dataIndex: "StateZipcode", sortable: true},
{header: "cId", width: 120, dataIndex: "CityId", sortable: true},
{header: "CustomerName", width: 120, dataIndex: "CustomerName", sortable: true},
{header: "cityzip", width: 120, dataIndex: "CityZipcode", sortable: true}

],

renderTo:'example-grid',
width:540,
height:200
});

store.load();
//store2.load();
});

Condor
7 Oct 2010, 5:44 AM
Any javascript debugger will do (I still prefer Firebug, but other debuggers are getting better).