読者です 読者をやめる 読者になる 読者になる

初心者のためのExtJS入門

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

ExtJSを導入する

ExtJS

ExtJSはSenchaが提供しているWebページのフロントエンド用フレームワークです。グリッドやチャートなど高機能なUI部品が多数用意されており、私はとても便利に感じています。どういう表現が可能になるかはサンプルで確認できます(http://examples.sencha.com/extjs/6.2.0/examples/)。現在、ExtJSは有料になっていますが、トライアル版は30日間無料で利用できます。

ダウンロード

まず、ExtJSSDKとSencha Cmd(せんちゃこまんど)をダウンロードします。ちなみにExtJSを購入するとフォーラムサイトを利用できるようになり、そこから全てのバージョンをダウンロードできるようになります。

ExtJS: https://www.sencha.com/products/evaluate/

Sencha Cmd: https://www.sencha.com/products/extjs/cmd-download/

SDKフレームワークの本体です。Sencha CmdはExtJSのアプリケーションの作成やビルドなどを行うためのツールです。テストツールやSenchaアーキテクトといった別のツールもありますが、ここでは扱いません(無くても問題ありません)。

Sencha Cmdをインストールしたら、コンソール画面で「sencha」を実行できるようになります。ExtJSとSencha Cmdのバージョン管理は大切です。自分がどのバージョンを使っているのかは理解しておくようにしましょう。

アプリケーション作成

ExtJSのアプリケーションを作成してみます。

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

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

ここではMemoというアプリケーション名で作成してみました。なおアプリケーション名は、今後作成するクラスのパッケージ名の一部にも含まれます。(Memo.view.Mainのように)

開発用サーバで起動

アプリケーションを作成したので、とりあえず動かしてみます。

/**
 * ビューポートクラス。
 *
 * @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'
    }
});

実行完了したら、開発用の内部サーバも起動します。http://localhost:1841にアクセスして画面が表示されることを確認しましょう。

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

ここまでが導入となります。