I would like to announce an extension that I have been working on for about 3 days.

I had a port of ExtJS' GridPanel working but it was suggested that I do some things with HTML5 and CSS3 so I rewrote it. I am now actually using the column layout provided by CSS3 which made it a lot easier to code as the templates are super small versus ExtJS'. This extension was about 600 lines and has now shrunk to under 300 using CSS3 column layout!

Demo: http://www.simoens.org/Sencha-Projects/demos/
GitHub: http://github.com/mitchellsimoens/Ext.ux.TouchGridPanel

Features:
  • CSS3 column layout **see note
  • Sorting
  • Row selection
  • Multi Selection
  • Paging support thanks to Ext.ux.touch.PagingToolbar
  • Custom column renderers **see note
  • Show/hide columns on the fly
  • Sort icons in headers

TODO (in no order):
  • Cell selection
  • Custom column renderers
  • Paging with animation
  • DND
  • Add features lost in version 2.0b1

I've tested on the iPad (iOS3) and iPod (iOS4) and works however on my Android 2.1 phone it displayed but did not select a row or sort.

Fixed!!!! One error which I am so far not able to figure out is that the grid will not scroll. Now that I have this working pretty well, I will look into it.

Let me know what you think!

Update (Version 2.0b1)
Rewritten again leveraging Ext.DataView instead of doing all the scrolling and selection by myself. Code is now about 80% smaller! Using Ext.DataView, I have lost some features that I will try to wrap back in before releasing a full version.

Update (Version 1.5)
Rewritten to work with Sencha Touch 1.0

Update (Version 1.4.1):
  • Fixed button placement to first column. Was rendering weird to the last column
  • Added beforerecorddelete and recorddelete events
  • Removed Sheet component from actual class

Update (Version 1.4):
  • Added editing
  • Sort icons in headers

Update (Version 1.3):
  • Simplified the getting of row and column indexes
  • Added lots of comments

Update (Version 1.2):
  • Added custom column renderers
  • Updated demo

Update (Version 1.1):
  • Fixed scrolling
  • Updated demo

**Note: CSS3 Column Layout is just not flexible enough to use so I have ditched using it. Since I am using a DataView, I do not have control over column renderers however check out what classes are on each cell as they are unique to the mapping and any conversion of text/date/etc can be done in your Model.