Ext.ux.TouchGridPanel v2.0b1

[irocker]

Sounds great... I will await your update!

[mitchellsimoens]

Paging Toolbar anyone?

http://www.sencha.com/forum/showthre...gingToolbar-v1

[mitchellsimoens]

I have added sorting and the ability to show/hide columns.

To sort, click on the header.

To show/hide columns:

grid.toggleColumn(1); //by index
grid.toggleColumn("price"); //by mapping

[mitchellsimoens]

Check out my new Paging Toolbar!

Github - https://github.com/mitchellsimoens/E....PagingToolbar
Demo - http://www.simoens.org/Sencha-Projects/demos/

[irocker]

Awesome, Mitchell! You rock!

Now if we can just have the plugin for a totals bar, you will have made my life complete. If you are going to do that, it would be good to have the option of docking it or just having it be the last row of the grid.

[mitchellsimoens]

Ext.ux.touch.GridSummary - http://www.sencha.com/forum/showthre...GridSummary-v1

You have an option to add a dock or a row and you can summarize to have the total or an average. You can also specify the decimal position.

This will work in conjunction with Ext.ux.touch.PagingToolbar as it refreshes the summaries on store data change (of course).

I'm not 100% happy with it but it works.

[Nicodemuz]

Sweet! You've become my personal god!

[Nicodemuz]

Hi,

I have been playing around with your plugin but I have been having some scrolling problems when embedding the TouchGridPanel into another panel. I am able to scroll the grid but directly after I release my finger/mouse, the grid goes back into its original position.

Below is some code that I have been playing around with:

var section_Transactions = new Ext.Panel({
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
	dockedItems : [{
		xtype : "toolbar",
		dock  : "top",
		title : "Title",
		items: [{
			ui  : 'back',
			text: 'Back',
			handler: function() {
				navigate(section_PropertyDetails);
			}
		}]
	}],
    items: [{
		layout: {
			type: 'auto',
			align: 'center'
		},
		height: 260,
		padding: '5 5 5 5',
		html: 'Content'
		
	}, 
	
	
		new Ext.ux.TouchGridPanel({
			store       : store_Transactions,
			multiSelect : false,
			layout      : 'auto',
			dockedItems : [{
				xtype : "toolbar",
				dock  : "top",
				title : "Ext.ux.TouchGridPanel by Mitchell Simoens"
			}],
			colModel    : [{
				header   : "Company",
				mapping  : "address",
				flex     : 2
			},{
				header   : "Price",
				mapping  : "price",
				style    : "text-align: center;"
			/*},{
				header   : "Change",
				mapping  : "change",
				cls      : "centered-cell"
			},{
				header   : "% Change",
				mapping  : "pct",
				cls      : "centered-cell"*/
			},{
				header   : "Last Updated",
				mapping  : "size",
				hidden   : true,
				style    : "text-align: right;"
			}],
			listeners: {
				beforeselect: function(dataview, nodes, selections) {
					console.log(selections);
				},
				containertap: function(dataview, e) {
					console.log(dataview);
				},
				itemdoubletap: function(dataview, index, el, e) {
					console.log(index);
				},
				itemswipe: function(dataview, index, el, e) {
					console.log(index);
				},
				itemtap: function(dataview, index, el, e) {
					console.log(index);
				},
				selectionchange: function(selectionModel, selections) {
					console.log(selections);
				}
			}
		})
	
	
		
		
	]
});

[mitchellsimoens]

Remove the layout you put on the grid. Not sure why you would specify a default anyway but that is overriding the fit layout that i put in the grid. For a dataview or list to scroll properly, the parent panel cannot use the auto layouts.

[Nicodemuz]

Remove the layout you put on the grid. Not sure why you would specify a default anyway but that is overriding the fit layout that i put in the grid. For a dataview or list to scroll properly, the parent panel cannot use the auto layouts.

I had to override the layout, because if I keep it as "fit", the panel will only show the headings without any rows.