Ext.ux.touch.grid

As usual, I have the first extension built and released

Ext.ux.TouchGridPanel was a huge success, thank you for everyone's input as it matured (still has room). Sencha Touch 2 should not be without a grid component either and as of the first developer preview there is no native grid component.

Ext.ux.touch.grid is the namespace and like the new namespacing Sencha Touch 2 and Ext JS 4 started, I followed with this.

The main class is Ext.ux.touch.grid.View which is just a customized DataView. It supports having a header and of course all the rows. You can have cell renderers (uses XTemplate's renderers instead of any processData method).

Ext.ux.touch.grid.View is pretty stripped down. In fact it doesn't even support sorting. I haven't left you out in the cold, I just wanted to have a lightweight grid component.

Like Ext JS 4's grid architecture, Ext.ux.touch.grid has the concept of features. Features are basically plugins. Unlike Ext JS 4, I allow you to specify what stage in the grid you want to instantiate a feature. There are two stages, in the constructor and in the initialize methods. Add features to constructorFn array and it will create the feature right before the callParent call. Save for initializeFn array.

Like I said, this is a start. Many things will change to further this grid and also keep inline with the latest Sencha Touch 2 version.

Thanks... good news, shouldn't be any problems with the renderers like the last one! Using the built-in XTemplate way of changing values Don't think I will be able to get horizontal scrolling working but am still looking into that. Also need to be able to show/hide columns and that will come as a feature!

Great news! Touch desperately needs a grid, and its great you developed one. Here are some problems I have had in case it helps you. I understand its not ready for primetime, but was testing how it would work with MVC

I have a skeleton test app where I was putting in different features testing 2.0 and most things were working. I tried adding a TouchGrid to a carousel, and as soon as I did, the entire app stopped loading. No warnings, no errors, just didn't draw anything in the app. This includes the viewport, etc. There was nothing but a couple empty divs where the main app would be drawn. As soon as I removed the TouchGrid reference, it was back to normal. The tabpanel showed up fine as well as the carousel.

Below is my grid, carousel, tabpanel, app.js, and controller. I hope this is useful to you. I am really confused at it not throwing any errors, yet nothing loading either.

As a side note, I checked firebug, and the view, store, and models are all being loaded dynamically (as well as all your ux code) and there are no 404 errors not being able to find a script

<edit> Adding another note, I commented out the "requires" line & the items array in the carousel, and every reference to the grid in the controller, and it was still loading blank. Then I commented out the LinkSummary store, and all of a sudden the skeleton app started loading again. Will do more investigating, but I am stumped as to why no error is thrown and the store causes a blank page. (If it is really the cause?)

So are things working? I have a TabPanel that has fullscreen to true and one item which is a Carousel. The Carousel has two items under it which is two different instances of the grid and everything is working like it should. Here is all my code:

It's not working for me. It crashes with the error I posted in Carousel.js on the first grid it tries to create:

'Uncaught TypeError: Cannot call method 'addCls' of null'

Carousel.js-- Line 181

Code:

item.element.addCls(this.getItemCls());

So far the main difference I see is you are instantiating the instances of the stores & grids yourself, while I am using the new Touch MVC pattern similar to extjs4 with lazy loading. I am not sure what it is expecting `item.element` to be in the code above. I will continue to investigate but any insights are helpful.

It could really be coming from anywhere though, since this is a new ux release working off of ST PR1. But b/c of the popularity of your plugin, I figured it would be best to figure out which side the problem is on in case a bug report should be filed.

It also could be with the way I set it up. I stopped referencing the class I created extending your view, and just defined everything within the carousel as you did. I didn't get the item.element error, but a different one in the View.js constructor about it not being able to find constructorFn. That one should be easy for me to fix.

However, I will see if I can find an answer to the original problem since it's better to define an extended class of your TouchGrid with all my config stuff in there, but I am going to continue down the path you did of defining it within the carousel and see if I can get it completely working, then work backwards.