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!
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.
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.
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.
All the CSS is included in the Tutorial Package but you can just copy and paste the CSS above into some