Ext.ux.touch.PagingToolbar v1

[mitchellsimoens]

With people asking for paging support in my Ext.ux.TouchGridPanel, I have created a paging Toolbar named Ext.ux.touch.PagingToolbar.

Sencha Touch makes paging super easy with function like nextPage, previousPage, and loadPage.

Give it a whirl - http://www.simoens.org/Sencha-Projects/demos/
Git - https://github.com/mitchellsimoens/E....PagingToolbar

Tested on Sencha Touch 1.0.2

[SimonFlack]

Works well. Easy to understand and use. I liked the kitchen sink style demo too. Great way to group custom stuff that sencha users are already familiar with. I might do that myself.

[mitchellsimoens]

Thank you. I figure why reinvent the wheel when the kitchen sink works perfectly!

One thing that I haven't mentioned about Ext.ux.touch.PagingToolbar is that it will first look to see if you specified a store to the plugin itself. If it doesn't find one then it will inherit it's parent's store. Problem is when you use it with a DataView or List, they cannot have docked items. So you would then have to specify the store on the DataView/List and specify Ext.ux.touch.PagingToolbar on the Panel specifying the store to Ext.ux.touch.PagingToolbar. Does this make sense?

Oh, about your PM to me... I'm not at all very understanding on licenses. I had someone who wanted to use my TouchGridPanel for a large commercial project but needed tint be GPLv3 and at the time I didn't specify what license I had so I picked it for that reason. Wikipedia has a nice write up though if you do take the time to read it.

[SimonFlack]

Thanks. I have read it. Hurt my brain... Hehe.

[Nicodemuz]

Nice work!

I think I might have found a small bug? In your demo, you are using totalProperty:
totalProperty: "total"

However, totalProperty is not used anywhere in Ext.ux.touch.PagingToolbar.js.

Thanks again! 8)

[mitchellsimoens]

I actually do. The function getTotalRecs drills down to get the total property that is created using the totalProperty.

[Nicodemuz]

Hi,

I'm encountering a very weird bug with the PagingToolbar. The bug appears to only appear on the iPad, desktop (Google Chrome) and Android (Samsung Galaxy Tab) works just fine.

I am having a layout with several tabs. One of the tabs is using TouchGridPanel with PagingToolbar. Whenever I switch to this tab or switch away from this tab, the screen freezes for a while. Clicking on any of the buttons will not help. I'm not exactly sure what might be causing the bug, but if I remove the PagingToolbar plugin from the TouchGridPanel, everything seems to work fine.

Here's the code I'm using:

var subsection_Transactions_All = new Ext.ux.TouchGridPanel({
	id: 'subsection_Transactions_All',
	title: 'All',
	cls: 'table_Transactions',
	
	// Layout options
	layout: 'fit',
	flex: 1,
	
	// Store options
	store: store_Transactions,
	plugins: [new Ext.ux.touch.PagingToolbar()],
	multiSelect : false,
	
	// Columns
	colModel: transactionColumns
})

Is there something that I'm missing?

[Nicodemuz]

Hi,

Would it be possible to build in support for a "First page" and "Last page" buttons?

Cheers,
Nico

[Shranes]

my touchgridpanel doesn't seem to integrate with myPagingToolbar...
i can't navigate to the other pages... 'Next' button doesn't work and i can't generate my page list either..

what could be the problem??

[dennisye]

Hi,

You have mentioned:" Problem is when you use it with a DataView or List, they cannot have docked items. So you would then have to specify the store on the DataView/List and specify Ext.ux.touch.PagingToolbar on the Panel specifying the store to Ext.ux.touch.PagingToolbar. "

how to do this?

how to change the following codes to work?

var panel1 = {
xtype: 'panel',
items: [{
width: 300,
height: 500,
xtype: 'list',
store: PagingToolbarStore,
plugins: [new Ext.ux.touch.PagingToolbar()],
itemTpl: 'Company: {company}, Price:{price}, Last Updated: {updated}.'
}],
plugins: [new Ext.ux.touch.PagingToolbar()], ///??? put the plugin here ???///
};

Thanks.