目的

Pluginの開発〜公開の流れを理解

アジェンダ

環境準備
開発
Build
公開

環境準備

新規アプリ作成
ux.touchフォルダ追加
Ext.loaderにパス追加

sencha list scroll reset

今回は、sencha-list-scroll-resetを例に話を進めます

新規アプリ作成

$ mkdir sencha-list-scroll-reset
$ sencha -sdk ./sdk-2.1.0 generate app SenchaListScrollReset ./

※ コマンドについて：Ext JS 4 アプリケーション開発における便利関数と使いどころの紹介など

ux.touchフォルダ追加

Plugin用にux.touchフォルダを作成

$ mkdir -p sencha-list-scroll-reset/ux/touch

※ 他にはux直下、tuxなどプラグインを格納するフォルダには様々な流派がある

Ext.loaderにパス追加

$ vi sencha-list-scroll-rese/app.js
-----------------------
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'Ext.ux.touch': './ux/touch',  // ←パスを追加
    'SenchaListScrollReset': 'app'
});

PluginをExt.LoaderのPathに追加する

開発 - Plugin -

Plugin 全体像

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

    requires: [
    ],

    alias: 'plugin.listscrollreset',

    config: {
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    init: function (component) {
    },

    hoge: function(){

    }

});

aliasを設定

aliasを"plugin.XXXXX"形式で設定

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

    requires: [
    ],

    alias: 'plugin.listscrollreset',  // ←必ずplugin.XXX形式にする

Pluginは、plugin.というaliasNameを指定してExt.plugin.Plugin
を継承して生成される

Ext.Componentのapplypluginsを参照

ロジック

pluginのinit関数に渡される引数がpluginを読み込んだコンポーネントになる

init: function (component) {
    // componentが読み込んだコンポーネント
}

Plugin利用側で、読み込む

plugins.xclassに作成したプラグインを指定。同時に、オプションも渡せる

config {
    plugins: [
        {
            xclass: 'Ext.ux.touch.ListScrollReset',
            toolbarItemId : 'main-toolbar',
            listItemId: 'main-list',
            scrollAnim: {duration: 5000}
        }

Build

ビルド用にuxフォルダへのパスを通す
ビルド実行

そのままビルド実行すると。。。

ビルドコマンド実行して下記エラーがでる
コマンド用にuxフォルダへのpathが通ってないのが原因

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

ビルド用にuxフォルダへパスを通す

ビルドコマンド用にuxフォルダへのPathを通す

$ cd sencha-list-scroll-reset
$ vi .sencha/app/sencha.cfg

app.name=SenchaListScrollReset
app.framework=touch
app.classpath=${app.dir}/app.js,${app.dir}/app,ux // ←パスを追加

ビルド実行

$ cd sencha-list-scroll-reset
$ sencha build app production

公開 (github / sencha market)

githubに公開
sencha marketに公開

githubに公開

githubに作成アプリを公開
github pages等にデモが上がっているとGood !!

sencha marketに公開

sencha marketとは
登録

sencha marketにとは

Secha Incが運営する、Plugin / Custom Component / tool / themeを公開するサイト

登録

名前、説明、スクリーンショット、ライセンス等の情報を入力

申請

登録後、許可待ち

公開

公開＼(^o^)／

最後に（所感）

Custom Componentはレゴのように積み上げていくのが楽しい
Pluginで痒いところに手が届くような機能拡張するのも楽しい

＼(^o^)／ FUN!!

参考

Appストアにあるようなダウンロードボタン
- multistate button
写真を一覧で表示する選択可能なリスト
- image grid list
ツールバータップで、リストを一番上までスクロールする
- list scroll reset

Pluginの開発から公開まで

目的