How to use custom component by using bower in sencha touch

Prerequisite

• installed bower
• installed senchacmd
• downloaded sencha sdk

Create new app

mkdir ${appname}
cd ${appname}
sencha -sdk {senchatouch_skd_path} generate app ${appname} ./

Create .bowerrc

Create .bowerrc to install component into ux folder.

vi .bowerrc

	{
 	 	"directory": "ux"
	}

Create bower.json

bower init

Install

※ Following operation is sample when you use sencha-list-scroll-reset.

	bower install --save sencha-list-scroll-reset

├── .bowerrc
├── bower.json
└── ux
    └── sencha-list-scroll-reset
        ├── .bower.json
        └── bower-dist
            └── ux
                └── touch
                    └── ListScrollReset.js

Settings in your sencha touch app

Set class path to custom component in app.js.

vi app/app.js

Ext.Loader.setConfig ({
    enabled: true ,
    paths: {
        'Ext.ux.touch.ListScrollReset': 'ux/touch/ListScrollReset.js'
    }
});

Use component

Add class name in requires config.

'use strict';
Ext.define('SenchaListScrollReset.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    requires: [
        'Ext.Toolbar',
        'Ext.ux.touch.ListScrollReset', // ← 追加
        'Ext.dataview.List',
        'Ext.data.Store'
    ],

Settings for build your sencha touch app

You should add settings to build you app.

vi .sencha/app/sencha.cfg

Add ,ux.

app.classpath=${app.dir}/app.js,${app.dir}/app,ux