No.3 ユーティリティークラス

Sencha フレームワークには、便利な静的メソッドを持つクラスがたくさん用意されています。
この場で全てを紹介しきることはできませんので、普段よく使われるメソッドを紹介させていただきます。

Extグローバルオブジェクト

Extグローバルオブジェクトは普段よく利用される関数が含まれています。

onReady

Sencha ExtJSのコードが正常に動作するには、ライブラリとページが完全に読み込まれている必要があります。

そこで使われるのがExt.onReadyメソッドです。

1
2
3
4

// ライブラリとページの読込が終わってから実行される
Ext.onReady(function(){
    Ext.Msg.alert('Sencha', 'Ext is Ready!');
});

application

もうひとつ、Ext.onReadyより優れた機能をもつのがExt.applicationです。
このメソッドはSencha Cmdでアプリケーションを生成したときにapp.jsに記述されています。
Ext.onReadyにはない、MVCと動的ローディングの仕組みを備えています。 動的ローディングとは必要になったファイルを自動的に読み込む仕組みで、自分でファイルの読込順を管理する作業から解放してくれます。

1
2
3
4
5
6
7
8
9
10
11
12

Ext.application({
    name: 'MyApp',
 
    // setting application
        ・
        ・
        ・
    // 全ての準備がととのってから実行される
    launch: function()  {
        Ext.Msg.alert('Sencha', 'Application is Ready')
    }
});

define と create

Sencha フレームワークの中では、prototype型のオブジェクト指向言語であるJavaScriptに、 伝統的な「クラス」型のオブジェクト指向開発の優れた部分を取り入れたフレームワークとなっています。 このクラスを利用する際に、クラスの定義と生成（インスタンス化）を行うのがこの二つのメソッドです。

1
2
3
4
5
6
7
8
9
10
11
12

Ext.define('SubClass', {
    extend: 'BaseClass',
    config: {
        :
        :
    },
    newMethod: function(){
        console.log('SubClass.newMethod was called.');
    }
});
 
var obj2 = Ext.create('SomeClass',{...});

クラスシステムの詳細は後ほどしっかりと解説します。 ここでは、Ext.defineはクラスを定義し、Ext.createでクラスを生成する、ということを覚えておいてください。

applyとapplyIf

JavaScriptには関数のオーバーロードがないため、引数などを増やしたり変更するためによく使われるのが、 引数を１つのオブジェクトにまとめてしまう方法です。
Sencha フレームワークではこの方法を採用していて、コンフィグをオブジェクトで渡します。
このときに便利なのがExt.applyとExt.applyIfのメソッドです。

この２つのメソッドはどちらもオブジェクトにプロパティをコピーする目的で使われますが、
その挙動に違いがあります。

apply は、既に存在するプロパティも上書きします。

1
2
3
4
5

var obj = {name: 'Hubert', age: 20};
 
Ext.apply(obj, {age: 22, hobby: 'tennis'});
 
console.log(obj); // {name: 'Hubert', age: 22, hobby: 'tennis'}

applyIf は、既に存在するプロパティは上書きされません。

1
2
3
4
5

var obj = {name: 'Hubert', age: 20};
 
Ext.applyIf(obj, {age: 22, hobby: 'tennis'});
 
console.log(obj); // {name: 'Hubert', age: 20, hobby: 'tennis'}

Ext.Array

Ext.Arrayは、配列を扱う上で便利なメソッドが用意されたシングルトンクラスです。

例: Ext.Array.forEach

• 配列に対して繰り返し処理を行うことができます。
• ブラウザが、ネイティブのforEachメソッドをサポートしていたら、そのメソッドを呼び出します

1
2
3
4
5
6
7
8

var array = ['A', 'B', 'C', 'D', 'E'];
var str = '';
 
Ext.Array.forEach(array, function(value) {
    str += value;
});
 
console.log(str); // ABCDE

もちろん繰り返し処理だけではありません。
配列の要素の追加・削除・取得やコピー・マージなど、たくさんのメソッドがあります。

Ext.Date

Ext.Dateは、日付を扱う上で便利なメソッドが用意されたシングルトンクラスです。

例: Ext.Date.format

• 日付を指定した形でフォーマットして、文字列として返してくれます。

1
2
3
4
5

var oneday = new Date(2013, 1, 10);
console.log(oneday); // Sun Feb 10 2013 00:00:00 GMT+0900 (JST)
 
var strOneday = Ext.Date.format(oneday, 'Y/m/d');
console.log(strOneday); // "2013/02/10"

他にも日付の計算や、情報を取得するメソッドなどが用意されています。

Ext.Object

Ext.Objectは、オブジェクトを扱う上で便利なメソッドが用意されたシングルトンクラスです。

例: Ext.Object.each

• オブジェクトに設定されているプロパティと値の分だけ繰り返し処理を行います。

1
2
3
4
5

var obj = {name: 'Hubert', age: 20};
 
Ext.Object.each(obj, function(key, value, object){
    console.log(key + '=' + value);
});

他にもプロパティ名や値を配列で取得したりといったことをするメソッドもあります。

まとめ

Sencha フレームワークでのよく利用されるメソッドを紹介させていただきました。 まだまだたくさんのメソッドがありますので、 より詳しくお知りになりたい方は是非APIドキュメント を参照下さい。

次回はDOM操作についてです。
お楽しみに!