How to use custom component by using bower in sencha touch


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


※ 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.ux.touch.ListScrollReset', // ← 追加

Settings for build your sencha touch app

You should add settings to build you app.

vi .sencha/app/sencha.cfg

Add ,ux.