さあ始めましょう

Ext JS 5 や Sencha Cmd 5を使い始めるのはとても簡単です。次の二つの手順を行うと、ローカルの Web サーバーで動作する、完全に機能するスターターアプリケーションができあがります。

1. Sencha Cmd 5のダウンロードとインストール
2. ターミナル、またはコンソールウィンドウを開いて、次のコマンドを実行します。

sencha generate app -ext MyApp ./app
cd app
sencha app watch

フレームワークのローカルのコピーを利用したい場合には、上記の ‘generate’ のコマンドを次のようにします。

sencha -sdk /path/to/framework generate app MyApp ./app

完了です。アプリケーションを生成して、サーバーをデプロイしました。次は http://localhost:1841 またはあなたのネイティブ localhost にアクセスします。新しく生成した Ext JS 5 アプリケーションを見ることができます。次のようになっているでしょう。

Sencha Cmd はアプリケーションに変化があるか監視します。あなたのアプリケーションに　“Waiting for changes…” が表示されいれば、最新であるということです。変更したり、ファイルを保存すると、別なメッセージがプリントされますが、もう一度 “Waiting for changes…” が表示されますので、他のメッセージは止まります。このサイクルは数秒かかりますので、ファイルの保存とブラウザの Reload を押す間に充分の間を空けておいて下さい。　

注：上記の手順の詳細に興味おありなら、Introduction to Sencha Cmd Guide をご覧下さい。

次の手順

二つの空のコンテナーだけがあるアプリケーションができてもしょうがないので、このサンプルをもう少し面白くしましょう。

north リージョン にタイトルを入れる

生成されたアプリケーションのスケルトンはボーダーレイアウトで構築されていますので、方位に基づいた「リージョン (region)」があります。メインのタブの部分は “center” リージョンで、”west” と書かれている空のパネルは “west” リージョンです。

良いアプリケーションは適切なブランディングが必要ですから、このアプリケーションにも会社名を入れてパーソナライズしましょう。

お気に入りの IDE やテキストエディタを使って、app/view/Main.js を開いて下さい。ここには説明したボーダーレイアウトが入っています。

さて、items 配列にもう一つの項目を追加しましょう。これは north リージョンに配置する新しいコンポーネントです。height は 40px、padding は 10px、表示するテキストは ‘My Company – My Company Motto’ です。

{
    region: 'north',
    xtype: 'component',
    padding: 10,
    height: 40,
    html: 'My Company - My Company Motto'
}

Main.js の items 配列は次のようになります。

[{
    region: 'north',
    xtype: 'component',
    padding: 10,
    height: 40,
    html: 'My Company - My Company Motto'
},
{
    xtype: 'panel',
    title: 'Navigation',
    region: 'west',
    html: '<ul><li>This area ...</li></ul>',
    width: 250,
    split: true,
    tbar: [{
        text: 'Button',
        handler: 'onClickButton'
    }]
},{
    region: 'center',
    xtype: 'tabpanel',
    items:[{
        title: 'Tab 1',
        bodyPadding: 20,
        html: '<h2>Content...</h2>'
    }]
}]

この変更でMain.jsファイルを保存して下さい。これで初めて “sencha app watch” が動作するのが見えます。このファイルの内容が変化すると、app watch がその変化を検出し、特別なビルド手順を実行します。再び “Waiting for changes…” が出ると、アプリケーションをリフレッシュできます。新しく追加した north リージョンが表示されるでしょう。

アプリケーションを少し改善できましたが、少し読みづらいですね。そのテキストをもっと目立つようにしましょう。

スタイルを変更するには、いくつかの方法があります。 最初の方法はこの状況には合っています。 例えば、ある部分のテキストを白くしたいと言いましょう。 他のアプリケーションの色は変更する必要はありませんが、ただその部分の黒いテキストだけが気になります。 その場合、次のように単純に cls コンフィグを north リージョンに追加するのがベストかもしれません。

{
    region: 'north',
    xtype: 'component',
    cls: 'appBanner',
    padding: 10,
    height: 40,
    html: 'My Company - My Company Motto'
}

そのクラスは、どの含まれている そしてインクルードしている CSSファイルのどれかで、そのクラスに割り当てる色を白にします。

.appBanner{
    color:#ffffff;
}

CSSファイルをインクルードするには、まず CSS ファイルを作って、それを app.json の CSS オブジェクトに追加します。

さて、アプリケーションのデザインに対して、より全体的なコントロールをしたい場合にはどうしますか？ その場合には、SCSS ファイルを変更したほうがいいでしょう。

SCSS (Sassy CSS) は SASS のシンタクスで、入れ子のルール、変数、mixins をデザインコードに追加できるようになります。新しく追加されたものは処理されて、アプリケーションが使う通常のCSSファイルに変換されます。

グローバル SCSS 変数の一覧を見るには、API ドキュメントの Ext.Global_CSS をご覧ください。

個々のコンポーネントにも変更可能な特定の SCSS 変数があります。 例えば、API の Ext.panel.Panel ページを見ると、Panel に関する SCSS 変数を見ることができます。

はじめに sass/var/view/main に Main.scss というファイルを作成して下さい。いくつかのフォルダはまだ存在していませんが、追加すると sencha app watch が検知します。なぜ Main.scss ファイルを追加しているのか不思議におもいますか？

アプリケーション内の各クラスに対して、Sencha Cmd は対応する SCSS ファイルを、変数の場合は sass/var/ を、ルールの場合は sass/src/ を検索します。アプリケーションには、 MyApp.view.main.Main というクラスがあるため、追加すると sass/var/view/main/Main.scss がビルドに含まれます。 他のビューは sass/var/view/{namespace}/ の下に {ViewName}.scss ファイルを生成すれば対象にできます。全ては SCSS ルール をどう整理し適用したいかに従います。

この場合には、north リージョンを独自のクラス定義として出すのが最適です。そうすると、ビューの中に SCSS ルールを当てなくても、ツールバーを具体的にターゲットできます。これはアプリケーション構造に深く入りすぎなくても、この点を明確にします。

現在は空の Main.scss ファイルの一行目に次の変数を追加できます。

$color: #ffffff;

変更が検出されたら、ページをリフレッシュして、テキストが白くなったことを確認して下さい (#ffffff)。シンプルなテキストの色変更を行っていますが、SASS 変数を通して、何でも変更することができます。

west リージョンを折りたたむ

さて、ブランドが表示されましたので、次は他の構成を実験しましょう。 west パネルは今少し邪魔なので、ユーザーがそれを除けられる方法を提供しましょう。Panel クラスは ‘collapsible’ というプロパティをセットできるようになっています。west リージョンのパネルに移動して、collapsible: true を追加しましょう。Main.js の west リージョンは次のようになっているでしょう。

{
    xtype: 'panel',
    title: 'Navigation',
    region: 'west',
    html: '<ul><li>This area...</li></ul>',
    width: 250,
    split: true,
    collapsible: true,
    tbar: [{
        text: 'Button',
        handler: 'onClickButton'
    }]
}

リフレッシュすると、パネルに小さい折りたたみ用のボタンがついています。

折りたたむと、アプリケーションは次のようになるはずです：

もしかしたら、最初から west リージョンが折りたたんだ状態にしたいこともあるでしょう。はい、そうです、west リージョンの項目は ‘collapsed’ プロパティをサポートしています。では、collapsed: true をセットしましょう。

{
    xtype: 'panel',
    title: 'Navigation',
    region: 'west',
    html: '<ul><li>This area...</li></ul>',
    width: 250,
    split: true,
    collapsible: true,
    collapsed: true,
    tbar: [{
        text: 'Button',
        handler: 'onClickButton'
    }]
}

タブとグリッド

アプリケーションの形が整って来ましたが、center リージョンには一つのタブだけしかありません。 これでは余り意味はありません。 もし tabpanel があるなら、最低二つのタブがあったほうがいいでしょう。 役立つ情報が含まれているタブを追加しましょう。 タブの追加は、tabpanel の items 配列に項目を追加して行います。

{
    region: 'center',
    xtype: 'tabpanel',
    items: [{
        title: 'Tab 1',
        bodyPadding: 20,
        html: '<h2>Content...</h2>'
    },{
        title: 'The Data'
    }]
}

素晴らしい！二つのタブがあります。しかし、二つ目のタブは空です。Ext JS は、複雑なデータをシンプルで読みやすい方法で表示することに長けています。では Grid コンポーネントを二つ目のタブに追加しましょう。

グリッドは四つのもので作られています：グリッドそのもの、データレコードを格納し整理するストア、ストアのデータを「モデリング」するモデル、データそのもの、の四つです。現実のアプリケーションでは、これは全て MVC アーキテクチャで区別されていますが、このサンプルでは全てインラインで記述します。

二つ目のタブがグリッド、ストア、フィールド定義、データを含むように変更しました。二つ目のタブは次のようになっています。

{
    title: 'The Data',
    layout: 'fit',
    items: [{
        xtype: 'grid',
        title: 'Simpsons',
        store: {
            fields:['name', 'email', 'phone'],
            data:[
                { name: 'Lisa',  email: "lisa@simpsons.com",
                  phone: "555-111-1224"  },
                { name: 'Bart',  email: "bart@simpsons.com",
                  phone: "555-222-1234" },
                { name: 'Homer', email: "home@simpsons.com",
                  phone: "555-222-1244"  },
                { name: 'Marge', email: "marge@simpsons.com",
                  phone: "555-222-1254"  }
            ],
            proxy: {
                type: 'memory'
            }
        },
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1},
            { text: 'Phone', dataIndex: 'phone' }
        ]
    }]
}

たくさんのコードを追加したように見えますが、完全に動作するグリッドを生成しました。デフォルトで、各カラムはソート可能で、ヘッダーをクリックすると昇順／降順を切り替えられます。各カラムヘッダーはデフォルトで順番を変えることができますし、各カラムヘッダーでは、カラムの表示／非表示のオプションを含むドロップダウンメニューがついています。さらに、各カラムをそれぞれ設定するものとても簡単です。アプリケーションをリロードすると、次のように表示されます。

注: sencha app watch が変更を検出できなかった場合には、ストップ (CTRL + c) して再起動してください。

上記のコードに関して、注意する点があります。

レイアウト

レイアウトシステムは、Ext JS のとても強力な部分です。アプリケーション内のコンポーネントのサイズと位置を全て管理します。Ext JS では、利用できるレイアウトが沢山ありますが、ご覧の通り、このパネルは “fit” レイアウトになっています。

“fit” レイアウトがあると、項目が自動的に拡大してコンテナにフィットするようになります。幅と高さを具体的にセットしたくない時に役に立ちます。

ストア

実際の状況では、上記のストアには url プロパティを持ったプロキシがあります。このプロキシがサーバーから情報を引っ張ってきます。視覚化のために、この例ではデータをインラインにしています。しかし、多くの場合には、インラインデータは使いません。

テーマの切り替え

たくさんの良い機能性を追加しました。さて、アプリケーションのルックアンドフィールに焦点をあてましょう。特に指定しない限りデフォルトテーマが各新しいアプリケーションで生成されますが、アプリケーションが生成された後でもテーマを切り替えるのはとても簡単です。

Ext JS の Crisp テーマを試してみましょう。

プロジェクトのルートにある app.json ファイルを開いて、次の行をファイルにどこかに追加すればいいだけです。

"theme": "ext-theme-crisp"

ビルドが完了したら、ページをリフレッシュすると、あなたのアプリケーションの外観が変わっているのがわかります。

まとめ

Ext JS と Sencha Cmd を利用してアプリケーションを立ち上げるのはどれだけ簡単かを見てきました。上記で紹介されたコンポーネントやクラスに関して、是非 API ドキュメントも確認して下さい。