Introducing UberGrid



We’re proud to present the new UberGrid component – a grid with super powers for Sencha Touch! UberGrid aims to support as many grid features as possible while also providing excellent performance on a wide range of mobile devices.

The UberGrid is the latest member of our product family. It already serves as the base component for another of our products – the Touch Scheduler. We decided that the two products would benefit from a clean separation of logic – the scheduler just uses the grid API and doesn’t need to worry about the underlying grid implementation. The grid on the other hand – will not “know” anything about scheduling, thus remaining an isolated and general-purpose grid.

The UberGrid is mainly targeted at tablet devices and ‘phablets’, since grids normally display a lot of information. There is of course nothing preventing you from using it on a supported smartphone though.


For the initial 1.0 release, the UberGrid supports:

  • Grouped column headers
    The columns in the UberGrid can have sub-columns and form groups. There is no limit on the number of nesting levels.


  • Buffered rendering

    UberGrid supports a special rendering mode in which only the rows visible in the viewport are included in the DOM. In this mode, the UberGrid offers a flat performance for any number of rows in the data set. For small data sets, you can just use the default non-buffered rendering mode which provides the best possible scrolling experience. See the below DOM footprint for a grid with a viewport fitting 5 rows, while having 100s of records in its store.

    Screen Shot 2013-02-28 at 11.44.17 AM

  • Unlimited number of locked sections

    The UberGrid can have several “locked” sections on the left or the right side of the main content area. In the image below, there is a scrollable section on both sides.

    Screen Shot 2013-02-28 at 12.02.18 PM

  • Unit tested with Siesta

    Code stability is a feature. The UberGrid is covered with unit and functional tests and the test suite is included in the package. We run the test suite nightly and before every release. This makes sure we won’t accidentally break old features in new releases and any bugs found should only be reported once – as each bug introduces a new test case. You can count on the public (documented) API to remain stable in future releases.


  • And there’s more…

    UberGrid also supports variable row height, column sorting, customizable data rendering, customizable header rendering and more. We’ll cover these features in a more technical blog post coming soon.

Getting started

The component provides an API which is very similar to the Ext JS grid panel. UberGrid is a subclass of the Ext.Container class and can participate in any Sencha Touch layout. To create a grid you simply instantiate the UberGrid.Panel class:

Ext.define('Meeting', {
    extend : 'Ext.data.Model',

    config : {
        fields : ['Id', 'Title', 'StartDate', 'Location']

    onReady: function () {
        var grid = new UberGrid.Panel({
            margin              : 20,
            rowHeight           : 50,

            columns             : [
                    header      : 'Id',
                    dataIndex   : 'Id',
                    width       : 60,
                    cellCls     : 'id'
                    header      : 'Name',
                    dataIndex   : 'Title',
                    flex        : 1
                    header      : 'Start Date',
                    dataIndex   : 'StartDate',
                    width       : 200
                    header      : 'Location',
                    dataIndex   : 'Location',
                    width       : 250

            store : new Ext.data.Store({
                autoLoad    : true,
                model       : 'Meeting',
                proxy       : {
                    type    : 'ajax',
                    url     : 'data.js',
                    reader  : { type : 'json' }


This example should be pretty self-explanatory. The required configs are columns and store. To dive deeper into the details, please see the getting started guide in the docs.


This is only the initial 1.0.0 release. We’ll keep adding new features with every new version. Among the nearest ones will be grouping, data index, columns resizing and later tree support. If a particular feature is important for you, let us know and we’ll try our best to add it!

Ready to try it out?

Here are some resources to get you going:


Leave a Reply

Notify of