How to create sencha plugin

Purpose

understand how to create sencha touch plugin

Agenda

1. Preparation to develop
2. Development
3. Build application
4. Publishment

Preparation to develop

1. Create new application
2. Make ux.touch directory
3. Add class path to Ext.loader

In this article, explain it by using my plugin. sencha-list-scroll-reset

Create new application

mkdir sencha-list-scroll-reset
sencha -sdk ./sdk-2.1.0 generate app SenchaListScrollReset ./

Make ux.touch directory

make ${APP_DIR}/ux/touch to deploy plugin you create

mkdir -p sencha-list-scroll-reset/ux/touch

* there are some pattern to deploy plugin ux or ux.touch or tux

Add class path to Ext.loader

$ vi sencha-list-scroll-rese/app.js

Ext.Loader.setPath({
	'Ext': 'touch/src',
	'Ext.ux.touch': './ux/touch',  // add class path 
	'SenchaListScrollReset': 'app'
});

Development

outline of plugin

Ext.define('Ext.ux.touch.ListScrollReset', {

    requires: [
    ],

    alias: 'plugin.listscrollreset',
    
    config: {
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    init: function (component) {
    },

    hoge: function(){
    
    }
    
});

set alias

You have to set alias as plugin.XXXX

Ext.define('Ext.ux.touch.ListScrollReset', {

	requires: [
	],

	alias: 'plugin.listscrollreset',

Plugin is created to inherit Ext.plugin.Plugin by setting plugin.XXX alias

refer to Ext.Component.applyplugins

Logic

parameter (component) is passed init function is reference to component which is include that plugin

init: function (component) {
	// componentが読み込んだコンポーネント
}

Include plugin

include plugin to set plugin.xclass propetry in component configuration which you want set plugin to.

config {
	plugins: [
		{
			xclass: 'Ext.ux.touch.ListScrollReset',
			toolbarItemId : 'main-toolbar',
			listItemId: 'main-list',
			scrollAnim: {duration: 5000}
		}

Build

1. set class path to build command
2. build!!

Attention

If you excute build command without setting class path following error occur.

Failed to find file for Ext.ux.touch.ListScrollReset

Set class path to build command

cd sencha-list-scroll-reset
vi .sencha/app/sencha.cfg

app.name=SenchaListScrollReset
app.framework=touch
app.classpath=${app.dir}/app.js,${app.dir}/app,ux // ←set "ux" directory

Excute build

cd sencha-list-scroll-reset
sencha app build production

Publishment (github / sencha market)

1. in github
2. in sencha market

Publishment in github

• push application to github repository
• It is better to deploy sample.

Publishment in sencha market

• About it
• Submit

About it

https://market.sencha.com/

Input

Enter those information

• name
• description
• screenshot
• license

Apply (Under examination)

Apply (Approval)

＼(^o^)／

Reference

• multistate button
• image grid list
• list scroll reset