How to create sencha plugin


understand how to create sencha touch plugin


  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': 'touch/src',
	'Ext.ux.touch': './ux/touch',  // add class path 
	'SenchaListScrollReset': 'app'


outline of plugin

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

    requires: [

    alias: 'plugin.listscrollreset',
    config: {

    constructor: function(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


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}


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


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.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


Enter those information

  • name
  • description
  • screenshot
  • license

Apply (Under examination)

Apply (Approval)