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>