初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

チュートリアル：モバイル向けの画面を作成してみる

ExtJS

前回までで、メモを残せるアプリケーションがおおよそ完成しました。

しかし、それはあくまでPCブラウザ向けです。

今回からは、モバイル向けの画面を作ってみます。(ちなみに、チュートリアルはモバイル向けまで完成したら終わりにするつもりです)

予備知識

これまではclassicディレクトリを使っていましたが、モバイル向けの場合はmodernディレクトリを使います。

また、ドキュメント(http://docs.sencha.com/extjs/6.2.1/index.html)ですが、右上にある「M」のみを有効にしておけば、modernで使えるクラスを検索できます。

f:id:sham-memo:20170121134840p:plain

classicとmodernでは、ExtJS SDKで使うソースが全く別物です。しかし、クラス名は同じだったりするので、ドキュメントを調べる場合などは注意が必要です。

modernで使えるクラスは、昔のSencha Touch2がベースになっています。そのため、classicとコードの記述方法が異なる部分が多々あります。

シンプルな画面を作成する

まずはApplication.jsをmodern/srcに作成します。

/**
 * アプリケーションクラス。
 *
 * @class Memo.Application
 * @extend Ext.app.Application
 */
Ext.define('Memo.Application', {
    extend: 'Ext.app.Application',
    
    name: 'Memo'
});

次にmodern/src/view/main/Main.jsを変更します。Main.jsはアプリケーション作成時に自動的に作成されたファイルですね。

/**
 * ビューポートクラス。
 *
 * @class Memo.view.main.Main
 * @extend Ext.Panel
 */
Ext.define('Memo.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'app_main',

    title: 'タイトル',

    html: 'テキスト'
});

ビルドとサーバ起動

開発時のビルドには、↓のようにsencha app watchのあとに「modern」と付与する必要があります。

sencha app watch modern

途中で「[INF] Processing Build Descriptor : modern」と表示されると、modernのビルドになっていることを示しています。

画面を表示してみる

あとは画面を表示してみます。ブラウザのUser Agentに気を付けてください。

f:id:sham-memo:20170121145650p:plain

これで準備完了です。