28 February, 2008

Xml elements and attributes in the ExtJS table

Ext JS - JavaScript Library is pretty powerful JavaScript/AJAX framework for building of Rich Internet Applications.

I've used it in my last public web project: Ubuntu index.



ExtJS has set of useful UI controls, internal components and strong AJAX, XML and JSON support.

E.g. you can present this XML file:


items.xml

<?xml version="1.0"?>

<items>

<item id="alien-arena">
<name>Alien Arena</name>
</item>

<item id="nexuiz">
<name>Nexuiz</name>
</item>

<item id="openarena">
<name>OpenArena</name>
</item>

</items>


as a table via this HTML + JavaScript code:


table.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ExtJS Table Sample</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>

<script type="text/javascript">
Ext.onReady(function() {
var reader = new Ext.data.XmlReader({record: "item"},
[{name: "id", mapping:"@id"}, "name"]);

var store = new Ext.data.Store({url: "items.xml", reader: reader});

var columnModel = new Ext.grid.ColumnModel([
{header: "Id", dataIndex: "id"},
{header: "Name", dataIndex: "name"}]);

var table = new Ext.grid.GridPanel({
store: store,
height: 200,
cm: columnModel,
renderTo: "table"
});
store.load();
});
</script>

<div id="table" style="width:300px; height:200px;"></div>
</body>
</html>


Here is the browser's view:

1 comment:

Anonymous said...

It gives an error as
Access Denied...

Solution?