Software RnD: 2/24/08

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>