JsTable and Ext JS

by Naneau

There are plenty of interesting things you can do with JsTable. Because I had some spare time I wrote up a simple application that uses JsTable to build an Ext JS grid. The result will look something like this:

JsTable and Ext JS Table

You can do this for every model you have. It will display all the fields for a particular row. Think of it as a simple, yet beautiful database viewer, created with just a few lines of code. The javascript code for this is easy enough to understand:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Event.observe(window, 'load', function(){
    var mP = new JsTable('Post');
   
    var ids = $R(1,50).toArray();
    mP.find(ids, callback);
});

function callback(rowset) {

    keys = $H();
    if (rowset.current()) {
        keys = rowset.current().toHash().keys();
        types = [];
        headers = [];
        for (var i = 0, size = keys.size(); i < size; i++) {
            types.push({name: keys[i]});
            headers.push({header: keys[i], dataIndex: keys[i]});
        }
    }

    myData = rowset.toArray();

    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(myData),
        reader: new Ext.data.ArrayReader({id: 0}, types)
    });
    ds.load();

    var colModel = new Ext.grid.ColumnModel(headers);

    var grid = new Ext.grid.Grid('grid-container', {
        ds: ds,
        colModel: colModel,
        autoSizeColumns: true,
        monitorWindowResize: false,
        trackMouseOver: true
    }).render();

};

It’s advisable to alert users of the fact that something is happening while JsTable searches for it’s data, like it is with all asynchronous calls on a webpage. A spinner with ‘Table Loading’ would be nice.