How to use custom component by using bower in sencha touch

February 16, 2014

Reading time ~1 minute

Prerequisite

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

add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story).But every time when you commit ...… Continue reading

I will build frontend and backend separately

Published on September 28, 2016

order of angular controller's initialisation

Published on October 05, 2015