Ext.ux.TouchGridPanel v2.0b1

[mitchellsimoens]

I'm using CSS3 column layout.. you can manage widths two ways with this. You can use "-webkit-column-count: x;" where x is the number of columns you want and the browser will manage the widths to be equal to 100% of the parent EL. You can also use "-webkit-column-width: xpx; where x is the width of each column and the browser will then figure out how many columns it can fit in the parent EL.

I am using "-webkit-column-count". I will be using "-webkit-column-span" to span columns.

About setting the width... I will work on how to do this.

[mitchellsimoens]

Oh, just one other request... would it be possible to have a summary row to display numeric totals? Ideally it would be docked to the bottom of the container the way the header is docked to the top, but it doesn't have to be. I added a row of totals to one of my grids and it looks fine so long as you don't re-sort it - at which point the total row doesn't stay at the bottom.

Sounds like a great plugin!

[mitchellsimoens]

People need to remember these are mobile devices. You should not have too much going on. Buffering could be great if it is done right. I will look at the buffered list and see if I can mix it in.

[kgilb]

@irocker
Yes, I did!
Although, I'm still working on getting it to show column headers and the ability to do server-side sorts, but the performance is much better. In my case, i'm hard coding the CSS to make it work because I know the number of columns I'm displaying. I'm also currently having an issue of displaying the buffered list in another panel.

//CSS
.data_col
{
    float:left;
    width:25%;
}

//code:
WBI.Views.symList = new Ext.ux.BufferedList({


    itemTpl: '<div class="data_col">{Col1}</div><div class="data_col">{Col2}</div><div class="data_col">{Col3}</div><div class="data_col">{Col4}</div>',
    grouped: false,     // optional
    indexBar: false,     // optional
    useGroupHeaders: false, // no group headers
    maxItemHeight: 75, // must specify
    blockScrollSelect: true,
    batchSize: 10,
    store: WBI.data.gridDataSet
}, {fullscreen:true});

[kgilb]

@mitchellsimoens:

Essentially that buffered list uses a sliding "window" and only has the HTML rendering for the currently "viewable" items. It works as advertised and for the app we're building for our clients, it's a must to be able to display large data sets on mobile and tablet devices.

[irocker]

Sounds like a great plugin!

I think it could be done pretty simply... it doesn't even need to actually calculate totals, it could just be filled using a separate AJAX request, which is essentially what I did anyway.

[irocker]

People need to remember these are mobile devices. You should not have too much going on. Buffering could be great if it is done right. I will look at the buffered list and see if I can mix it in.

Yeah, I agree that we don't want to get too crazy with number of rows displayed, but there are plenty of native apps such as the contact list that can successfully display hundreds of records with good performance, and it is indeed something that users consider necessary. I know that a web app is never going to be quite as fast as native, but I think we can get pretty close with buffering and such.

[squarefan]

@Mitch

if you are rewriting the plugin, please also have a look at the "scrolling issue" that I have reported earlier. Basically that there is a possiblity to reset (scrollTo) the grid to the top or any other position.

cheers,
Alex

[mitchellsimoens]

Ok, I have rewritten this. It is now about 100 lines of code and I leverage the DataView to do the displaying and selecting now. I have dumped CSS3 column layout as you can either have a column span 1 column or all of them, nothing in between.

If you go to http://www.simoens.org/Sencha-Projects/demos/ and click on the TouchGridPanel, you will see the Company column spans what would be 2 column widths. I am using the flex config option to determine how many columns that column should span.

I am thinking on whether or not I should do the buffering. I personally think you should not have a million rows in your Store. You should use paging. I have talked to a colleague and we think it's good practice for mobile devices. In fact, this point will be in Jay Garcia's upcoming book, Sencha Touch in Action.

This version also fixes the scrolling issue. If you only have, let's say one row, it would scroll all the way to the bottom. Since I am using a DataView, this problem has been fixed.

About the summary bar at the bottom... I will be looking into creating a plugin to do this as some may not want this capability.

[mitchellsimoens]

Forgot to mention... since I have rewritten the whole thing I have dumped some features. I will work tomorrow to wrap them back in.