はじめに

Ext JS 5とSencha Cmd 5を簡単に使い始めることができます。2つの手順を行うことで、ローカルウェブサーバーで稼働するフル機能の開始アプリケーションが準備できます。これには1.8または1.9互換のrubyコマンドがシステムパスにある必要もあります。

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に進みます。新しく生成されたExt JS 5アプリケーションを参照できます。次のようになります。

Sencha Cmdはアプリケーションに変更があるか監視します。_“Waiting for changes…”が表示されますが、これはアプリケーションが最新なことを示します。変更を加えファイルを保存すると、他のメッセージが表示されますが、これらは再度“Waiting for changes…”_メッセージが表示されて終了します。このサイクルには数秒間かかりますが、ファイルの保存とブラウザで再読み込みを押すまでに時間を空けるようにしてください。

注意：_上記の手順について詳しく知りたい場合、Sencha Cmdへようこそを参照することもできます。_

次のステップ

2つの空のコンテナで構成されるアプリケーションはあまり役に立たないので、この例ではもう少し意味のあるものにしてみましょう。

Northリージョンのタイトル

生成されたアプリケーションの雛形はボーダーレイアウトで作成され、基本方向をベースに「リージョン」を提供します。メインタブ領域は「センター」リージョンで「west」と名付けられたパネルが「west」リージョンです。

良いアプリケーションには適切なブランド設定が必要なので、会社名を追加してこのアプリケーションをパーソナライズしてみましょう。

好みのIDEまたはテキストエディタでapp/view/main/Main.jsを開きます。すでに説明してきたように、これが現在ボーダーレイアウトを保持しているコンテナです。

次に別のアイテムをアイテム配列に追加してみましょう。ここにnorthリージョンの新しいコンポーネントがあります。高さ40px、パディング10px、次のテキストを追加しました。‘My Company - My Company Motto’:

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

Main.jsのアイテム配列は次のようになります。

[{
    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リージョンが表示されます。

外観は少しだけよくなっていますが、読みづらいです。そのテキストをもう少し「ポップ」にしてみましょう。

スタイルを変更できる方法はいくつかあります。最初の方法は対象状況を絞った場合に最適です。例えば、特定のテキストを白にして、そうしたとします。他のアプリケーションの色は変更する必要はありませんが、その黒いテキストがちょっと気になります。この場合、単にclassコンフィグ（cls）をnorthリージョンに追加するのが最適です。

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

次に含まれるCSSファイルにそのクラスを追加し、色を白にすることができます。.appBanner{ color:#ffffff; }

CSSファイルを作成してapp.jsonのCSSオブジェクトに追加して含めることができます。

さらにアプリケーションのデザインにグローバルなコントロールを行いたい場合はどうでしょう。その場合、SCSSファイルを変更したいと思うでしょう。

SCSS（Sassy CSS）はSASSの構文で、ネスト化されたルール、変数、ミックスインをデザインコードに追加できます。これらの新しい追加機能は処理され、アプリケーションで消費できるように従来のCSSファイルに変換されます。

グローバルSCSS変数のリストを参照するには、APIドキュメントからこのページを参照してください。Global_CSS

また、個別のコンポーネントには変更できる特定のSCSS変数が含まれます。例えば、パネルAPIページを参照すると特定のパネルSCSS変数を表示できます。Ext.panel.Panel

ここでは、最初にMain.scssと名付けられたファイルをsass/var/view/mainに作成することを考えます。これらのフォルダの一部はまだ存在しませんが、追加するとsencha app watchによってピックアップされます。どのような理由でMain.scssファイルを追加しているのか疑問に思うことでしょう。

アプリケーションの各クラスについて、Sencha Cmdは対応するSCSSファイルを、変数はsass/var/、ルールはsass/src/で確認します。アプリケーションにはMyApp.view.main.Mainと名付けられたクラスがあるので、追加するとsass/var/view/main/Main.scssファイルがビルドに含まれます。また、{ViewName}.scssファイルをsass/var/view/{namespace}/{ViewName}.scssの下に作成することによって他のビューをターゲットにすることもできます。好みに応じて、SCSSルールを適用したり整理したりできます。

この場合、northリージョンを独自のクラス定義に抽出することが好ましいでしょう。SCSSルールをビューの別の場所には適用しないで、そのツールバーをターゲットにできます。ただし、これはアプリケーション構造をあまり深く追及しないで要点を示しています。

これで、次の変数を現在空のMain.scssファイルの最初の行に追加できます。

$color: #ffffff;

変更がピックアップされたら、ページを更新してテキストが白（#ffffff）になるのが分かります。シンプルなテキストの色変更を行っていますが、SASS変数でほとんどなんでも変更できます。

展開できるWestリージョン

これでブランドIDが用意できたので、他の設定を行ってみましょう。その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リージョンにはタブが1つしかありません。これでは意味がありません。タブパネルを用意する場合、少なくとも2つのタブは必要です。便利な情報のある別のタブを追加してみましょう。別のアイテムをタブパネルアイテム配列に追加してタブを追加します。

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

よくできました。これで、タブが2つになりました。ただし、2つ目のタブは空です。Ext JSは複雑なデータを読みやすい方法で表示するのに優れています。グリッドコンポーネントを調べて、2つ目のタブに追加してみましょう。

グリッドは次の4つで構成されています。グリッド自体、データレコードを格納して整理するストア、データをストア用に「モデル化」するモデル、そしてデータ自体です。実際には、これらのすべてが従来型のMVCアーキテクチャに分割されていますが、この例ではすべてを整列します。

グリッドにストア、フィールド定義、データを含めるように2つ目のタブを変更しました。2つ目のタブは次のようになります。

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

ここでは多くのコードを追加したように見えますが、フル機能のグリッドを作成しただけです。デフォルトでは、各列はソート可能で、ヘッダーをクリックするとASC・DESCソートを切り替えることができます。各列ヘッダーはデフォルトで順番を変えることもでき、列の表示・非表示を切り替えるドロップダウンメニューがあります。これだけではなく、各列を個別に設定するのは驚くほど簡単です。アプリケーションを再ロードしたら、次のようになります。

注意：_sencha app watchが何らかの理由で変更をピックアップできない場合、停止して（CTRL + c）再起動できます。_

上記のコードではいくつか注意点があります。

レイアウト

レイアウトシステムは、Ext JSの最も強力な部分の一つです。アプリケーションのあらゆるComponentの位置とサイズを処理します。Ext JSでは可能なレイアウトは多数ありますが、お分かりのように、このパネルには“fit”というレイアウトがあります。

fitレイアウトはコンテナを塗りつぶすようにアイテムが自動的に展開されます。これは幅や高さを具体的に設定したくない場合には非常に便利です。

ストア

実際には、上記のストアにはurlプロパティを持つプロキシがあります。プロキシはおそらくサーバーから情報を取得するでしょう。この例では見やすさのためにデータをインラインにします。ただし、ほとんどの場合にインラインデータは必要ありません。

テーマの変更

多くの機能を追加しました。アプリケーションの外観に焦点を当ててみましょう。新しいアプリケーションでは別に指定しない限りデフォルトのテーマが生成されます。ただし、アプリケーションの作成後でもテーマを簡単に切り替えられます。

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

プロジェクトルートでapp.jsonファイルを開き、ファイルの任意の場所に次の行を追加するだけです。

"theme": "ext-theme-crisp"

ビルドが完了したら、ページを更新すると、アプリケーションの表示が変更されているのが分かります。

まとめ

これで、Ext JSとSencha Cmdを使用してアプリケーションを稼働状態にするのがどれほど簡単かお分かりいただけたと思います。このチュートリアルで使用したすべてのコンポーネントやクラスについては、APIドキュメントを参照してください。