Nickolay Platonov
1 March 2013

Introducing UberGrid

Introduction We’re proud to present the new UberGrid component – a grid with super powers for Sencha Touch! UberGrid aims […]

ubergrid

Introduction

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.

Features

For the initial 1.0 release, the UberGrid supports:

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']
    }
});

Ext.setup({
    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' }
                }
            })
        })

        Ext.Viewport.add(grid);
    }
});

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.

Roadmap

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:
[list]

[/list]

Nickolay Platonov

Product updates