SechaTouchアプリにbower経由でカスタムコンポーネントを読み込む

5767 ワード
bower SenchaTouch ExtJS SenchaTouch テキストリンク

前提

新規アプリ作成

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

.bowerrc作成

追加されたコンポーネントがuxフォルダーに入るように.bowerrcを追加

$ vi .bowerrc

{
  "directory": "ux"
}

bower.jsonの作成

$ bower init

インストール

※ 今回は、sencha-list-scroll-resetを追加するとして話を進めます。

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

これでuxフォルダー内にインストールコンポーネントが追加されていきます

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

アプリ側で利用する設定

app.jsに読み込んだアプリのpathを設定する

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

読み込み

コンポーネントを利用するクラスでrequires指定に追加する

Main.js
'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'
    ],

ビルド設定

上記設定のままだとビルドコマンドを実行すると下記エラーがでる

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

ビルド用にpathを設定する

$ vi .sencha/app/sencha.cfg

最後に,uxを追加する

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