A Mad Moravian (kind of): extjs 4 TransformGrid sorting a column

3.05.2012

extjs 4 TransformGrid sorting a column

We have a set of information that we have been asked to sort one of the columns of data. My preference would be to have the SQL sort the values for me, but due to a number of factors it can't be done that way. So, I've spent the past couple of days playing with extjs.

Our code generates an html table and my task was to have extjs convert that to a grid and sort it on the first column.

Problem 1: html table tags

The first problem I ran into was that our html table was not up to snuff. We needed thead and tbody tags and, within the thead tag we needed th tags in order for the transformgrid to properly function.

Problem 2: contents of the column to be sorted

The column we want to sort contains an html link. The link value contains a document id and the linkable content is the document name. We want the sort to be based on the document name but, since extjs sorts on the entire contents of the cell, it was sorting on the document id. That was completely worthless.

So, in the html for the cell, I placed an html comment that contained the document name. Since I put it first in the cell, the document name became the value that took precedence for the sort

Problem 3: getting the column to sort

Since this is based on an existing table, I'm not creating the data store and I don't know the fields. I had to figure out some way to get the fields defined by the store and then set the sort to be on the first column.

Below is the html involved.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>From Markup Grid Example</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="extjs/shared/example.css" />
    <style type="text/css">
        #the-table {
            border:1px solid #bbb;
            border-collapse:collapse;
        }
        #the-table td,#the-table th {
            border:1px solid #ccc;
            border-collapse:collapse;
            padding:5px;
        }
    </style>
    <script type="text/javascript" src="extjs/bootstrap.js"></script>
    <script type="text/javascript" src="extjs/ext-debug.js"></script>

    <script type="text/javascript" src="transform-dom.js"></script>
</head>
<body>
    <h1>From Markup Grid Example</h1>
    <p>This example shows how to create a grid with from an existing, unformatted HTML table.</p>
    <p>Note that the js is not minified so it is readable. See <a href="transform-dom.js">transform-dom.js</a>.</p>

    <button id="create-grid" type="button">Create grid</button>

    <br />
    <br />

       <table border="5" width="500" id="xxxx">
      <thead>
      <th>col1
      </th>
      <th>col2
      </th>
      </thead>
      <tbody>
      <tr>
      <td>a table
      </td>
      <td>This is the table
      </td>
      </tr>
      <tr>
      <td>third table
      </td>
      <td>This is the table
      </td>
      </tr>
      <tr>
      <td>4. another table
      </td>
      <td>This is the table
      </td>
      </tr>
      </tbody>
      </table>

</body>
</html>

----------------------------------
Below is the javascript involved.
-----------------------------------

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'extjs/src/ux');

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.ux.grid.TransformGrid'
]);

Ext.onReady(function(){
    var btn = Ext.get("create-grid");
    btn.on("click", function(){
        btn.dom.disabled = true;

        // create the grid
        var grid = Ext.create('Ext.ux.grid.TransformGrid', "xxxx", {
            stripeRows: true,
            sortableColumns: false,
            enableColumnHide: false,
            enableColumnMove: false,
            enableColumnResize: false,
            sortOnLoad: true,
            sorters: {direction: 'ASC'},
            height: 130
        });

        //var store = grid.getStore();

        grid.getStore().sort(grid.getStore().getProxy().getModel().prototype.fields.keys[0],'ASC');

        grid.render();

    });
});