HOW TO: Create a Sencha Touch Plugin – Part 2 – making Ext.ux.PanelAction

If you haven’t already read Part 1of this mini blog series then I recommend you do before reading any further, but if you’re fairly confident with the basics of plugins then you can probably manage alright!


Quick Recap

In the first post we learnt the basic structure of a plugin is that it extends the basic JavaScript Object class and must at least contain a single function called “init” which takes one parameter that is a reference to the parent component that the plugin is used in. We also learnt that the init method is called when the parent component is initialised but before it is rendered.

You can read the full HOW TO: Create a Sencha Touch Plugin – Part 1 post here.


A Real World Example

Today I’m going to talk you through creating a more useful example that was created for use in our Prop.erti.es application which was an entry in the Sencha Touch contest. Basically the plugin adds an icon to a floating, modal panel and allows actions to be carried out when a user taps it – such as close the panel, submit a form etc. You can read a full description and discussion about the plugin on its own blog article. A screenshot of what we’re aiming for can be seen below. Unfortunately I’m only going to go cover creating the basic plugin and its functionality and won’t go into every feature that it has.

Ext.ux.PanelAction Plugin Example

or view the live demo (please use Safari, Google Chrome or your Smartphone!)

As with all our tutorials make sure you have a basic HTML file setup with references to the Sencha Touch framework and with the basic Ext.setup code in there ready. If you don’t have this then download the Tutorial Package from the link above and you can follow each step with the relevant files from the package.

Click the individual Steps’ headings then you will be taken to the page we created in that step so you can follow our progress as we go along!

CSS Overview

I don’t want to go into huge detail with the CSS involved, it’s not very complex so I’m sure there won’t be any problems with it. There are two classes to worry about the x-panel-action-icon which gives the created element its basic styles and the iconClass that provides the image and sizes for what you want. I’m going to work with a basic 32px x 32px clos image defined in the x-panel-action-icon-close class.

[css] .x-panel-action-icon
overflow: hidden;
position: absolute;
z-index: 99;


background-image: url(data:image/png;base64,iVBORw0KGgoAA…);
width: 32px;
height: 32px;

All the CSS is included in the Tutorial Package but you can just copy and paste the CSS above into some