Ext.ux.PanelAction: Add action buttons to floating Sencha Touch panels
Plugin Overview
This plugin can be applied to panels to give a simple and flexible way of adding action buttons to a panel. It could be used as a simple close button or as the submit button on a form.
Although very simple we hope it might be of use to someone else who is looking for an alternative way of performing actions on floating panels.
The Problem
This plugin was created within our Prop.erti.es project in response to a bug which closed a floating panel when an option was selected from a select field that lay within it. This meant we had to implement some sort of close/accept button on the panel so users could select options without having the form disappear.
The Plugin
The plugin places an icon on top of your panel (in any corner or in the middle of any side) which when tapped executes any method or function that you want, for example, closing the panel, submitting the form etc.
It is insanely simple to use and there are only a few config options that you need to worry about.
Just download the plugin from the link below.
… or view a live demo (please use Safari, Google Chrome or your Smartphone!)
Using the Plugin
Step 1
Add references to the Ext.ux.PanelAction.js and css/Ext.ux.PanelAction.css files to your HTML page.
Step 2
Add a new instance of the plugin to the ‘plugins’ config of your panel using a combination of the following config options, the important options to pay attention to are position, iconClass and actionMethod.
| position | defines where the Icon sits, the plugin automatically centres the icon but this can be adjusted with the xOffset and yOffset configs.Any combination of: ‘t’ (Top), ‘b’ (Bottom) or ‘c’ (Centre) and ‘l’ (Left), ‘r’ (Right) or ‘c’ (Centre)
For example, tl = Top Left br = Bottom Right etc |
| xOffset | a number (in pixels) to offset the horizontal position of the icon |
| yOffset | a number (in pixels) to offset the vertical position of the icon |
| baseClass | the base CSS class that is applied to the Ext.Element – shouldn’t need to be changed |
| iconClass | the CSS class that MUST define the background-image, width and height and any other custom styles required for the Ext.Element |
| iconPressedClass | the CSS class that is added to the Ext.Element when the user is pressing the icon |
| actionMethod | an array, or single value, or methods to execute when the icon is tapped. This can be in the form of an array or as a single value. Acceptable values are strings of a function that exists on the parent’sclass, anonymous inline function declarations and references to functions.For example these are all valid:
actionMethod: ‘hide’ actionMethod: function(){ alert(‘test’); } actionMethod: this.myFunction actionMethod: [‘hide’, function(){ alert(‘test’); }, this.myFunction] |
And that’s it!
There are no restrictions to using this plugin – download it and use it as you like (a link back is always nice though 
)
Sample Code
var pnl = new Ext.Panel({
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideMode: 'close',
hideOnMaskTap: false,
layout: 'fit',
html: panelContent,
showAnimation: {
type: 'pop',
duration: 250
},
plugins: [new Ext.ux.PanelAction({
iconClass: 'x-panel-action-icon-tick',
iconPressedClass: '',
position: 'br',
actionMethod: ['hide']
})]
});
pnl.show();
Please feel free to leave a comment with any suggestions, bugs or ideas that you have or if you need some help integrating it with your application.
13 Comments to "Ext.ux.PanelAction: Add action buttons to floating Sencha Touch panels"
Jeff B.
April 27, 2011
Stuart
April 27, 2011
Jeff B.
April 27, 2011
Jeff B.
April 28, 2011
Stuart
May 1, 2011
h.
May 5, 2011
Brandon
May 26, 2011
Stuart
May 26, 2011
Brandon
May 31, 2011
Fredo
September 17, 2011
Stuart
September 18, 2011
Fredo
September 19, 2011
Joshua Ellis
January 13, 2012