Useful Sencha Touch Ux Plugins

December 15th, 2012 by aditia rahman / No Comments  


Sencha Touch are quite nice framework to creating cross platform mobile application, sencha touch provide most common user interface component used in mobile device, however it might not cover all of your need in building mobile application, means sometimes you need third party ux component, for example I need an accordion layout which cannot be found on default component and I have read in this version 2.1 of sencha touch they focused on optimizing performance.

1. Ext.ux.Cover

Ext.ux.Cover inherits from Ext.dataview.DataView using the mechanisms from it to handle selections, and putting together data from and an Ext.XTemplate to create the dom elements.


visit source

2. Signature Pad Field

This extension extends the Ext.field.Text object utilizing an HTML5 canvas object for the component. When a user clicks on the signature field, the canvas appears in an overlay giving the user more real estate to sign their name. The signature is then displayed in the field’s body. The outputted form value is a base64 encoded image (string) which can be stored in any database. The extension utilizes traditional ST2 field methods such as getValue() and setValue(). The only additional configuration that was added was sigWidth and sigHeight to set the dimensions of the canvas. This extension also includes a base64 (toDataURL) work around for Android devices before 2.3.

visit source | demo

3. Ext.ux.touch.SwipeTabs

A plugin that lets the user swipe between tabs in a TabPanel. No configuration is needed.

visit source

4. Collapsible Slide Navigation Menu

This is an attempt to make a Facebook-like navigation panel for Sencha Touch 2. A collapsible slide navigation would be useful for applications that have long list of menu items on their navigation panel.

Collapsible Slide Navigation Menu

visit source

5. SlideToRemove Plugin

SlideToRemove is a simple plugin for Sencha Touch 2 that adds the ability to swipe list items to remove them upon confirmation, very similiar to the native iOS controls seen on iPhones/iPads. Users can swipe the list item to the left to show the remove button, and back to the right to cancel and display the list item again. Tapping the remove button will remove the record from the list’s store. When the list is hidden it will automatically close all open remove buttons. Configuration can be passed to change the text of the remove button.

Slide To Remove plugins

visit source

6. Audio Cover

Sencha Touch 2 Component which display a cover image and a circular progress bar for audio files like seen in iOS iTunes Lists. Features: display a cover image related to the audio track file which the component is binded to and display a circular progress bar which is updated in realtime while listening the audio track when the user tap on the cover element. The two faces of this component are shown using a Flip like animation, which give it a neat three-dimensional look.

Audio Cover

visit source | demo

7. Ext.ux.AccordionList

Accordion list with using You can use expand and collapse contents by header item tap. And also it can nested infinity!

visit source | demo

8. Pinch emulator plugin

Emulation of double touch pinch events for desktops. Can be useful for testing of pinch enabled components on desktop.

visit source | demo

9. Highcharts Extension

visit source | visit source 2 | demo

10. Numpad

Numpad plugin comes in handy when you want to avoid showing the full keyboard, it have other skin too, both for iphone and android.

visit source | demo

11. Knob Plugin

This is a plugin that can be added to the image widget of sencha touch 2 and above. This provides various functionalities of a rotating knob.

visit source | demo

        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment