チュートリアル：ビューポートを変更してみる

senchaコマンドでExtJSアプリケーションの雛型を作成しました。app, classicなどのディレクトリやapp.jsonなどのファイルが自動的に作成されています。ここからは具体的に作りながら覚えていきましょう。まずは慣れたいので浅い説明だけしていきます。

まず押さえておかないといけないのは、↓こんなところです。

• classic　・・・　PC用のファイルはここに作っていく
• modern　・・・　スマフォやタブレットなどのモバイル用のファイルはここに作っていく
• app　・・・　classicとmodernで共通して使うようなものはここに作っていく
• app.json　・・・　使用するテーマとかビルドの設定とかアプリケーション全体の設定について書いてある

では、自動的に作成されたビューポートを書き換えてみます。ビューポートというのは、アプリケーション全体の一番外側のビューです。絵画でいうならキャンバスにあたる部分です。ビューポートの上に、ボタンやテキストエリアやパネルといった部品を配置していきます。

app.jsを開くと、下記のような行があります。これが自動的に作成されたビューポートのクラスです。

mainView: 'Memo.view.main.Main' classicとmodernにもこれに該当するファイルが存在すると思います。classicのsrc/view/main/Main.jsを次のように変更してみましょう。

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

    html: '初めてのExtJS入門'
});

この状態で画面を表示すると、シンプルな状態になります。

ざっと説明。クラスを作成するときには、Ext.defineを使い、第1引数にクラス名を指定します。クラス名はファイルを配置するディレクトリ階層と合わせる必要があります。継承したいクラスがあれば、extendで継承できます。ここでは、Ext.Panelというクラスを継承しています。xtypeは、このクラスの別名(エイリアス)です。htmlに文字列を指定すると、パネル上に表示されます。

パネルに文字を出力する方法はいくつかあります。↓みたいな書き方もできます。これはテンプレートの機能を使って書いてます。

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

    tpl: [
        '初めての{text}入門'
    ],

    data: {
        text: 'ExtJS'
    }
});

このように、いくつか書き方があり、状況に応じて使い分けていくことになります。

今回はビューポートを単純な内容に書き換えたところで終了です。