Hello, Ext.js! - Extクラスの新規メソッド

ここでの動作環境は次のとおり。

  • OS: Mac OS X 10.5.7
  • Webブラウザ: Firefox 3.5.2 & Firebug 1.4.2

今回のアップデートでExtクラスに追加された機能は次のとおり。

  • Ext.iterate
  • Ext.isNumber
  • Ext.isString
  • Ext.isBoolean
  • Ext.isDefined

以下、各機能について簡単に触れておこう。

Ext.iterate

イテレートをおこなう。配列のイテレートのみをおこなう場合は、eachを使うほうが良い。

iterate( Object/Array object, Function fn, Object scope ) : void
  • Object/Array object: イテレート対象のオブジェクトまたは配列
  • Function fn: イテレート中にコールする関数
  • Object scope: 関数内のスコープオブジェクト
  • 返り値: void

Ext.isNumber

value値が数値型の場合はtrueを、それ意外の場合はfalseを返す。

isNumber( Mixed value ) : Boolean
  • Mixed value: 判定をおこないたい値を指定
  • 返り値: Boolean

Ext.isString

value値が文字列型の場合はtrueを、それ意外の場合はfalseを返す。

isString( Mixed value ) : Boolean
  • Mixed value: 判定をおこないたい値を指定
  • 返り値: Boolean

Ext.isBoolean

value値がbool型の場合はtrueを、それ意外の場合はfalseを返す。

isBoolean( Mixed value ) : Boolean
  • Mixed value: 判定をおこないたい値を指定
  • 返り値: Boolean

Ext.isDefined

value値が未定義値でない場合はtrueを、それ意外の場合はfalseを返す。

isDefined( Mixed value ) : Boolean
  • Mixed value: 判定をおこないたい値を指定
  • 返り値: Boolean

実際にこれらをコードを書いて試してみよう。

ext.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, Ext,JS! / Ext</title>
        <script type="text/javascript" src="./ext-3.0.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="./ext-3.0.0/ext-all.js"></script>
        <script type="text/javascript">
        <!--
        Ext.onReady
        (
           function()
           {
               var iteratesArray= new Array('1', 2, true, this);
               Ext.iterate(iteratesArray, console.log);

               console.log('Ext.isNumber(\'string\') : ' + Ext.isNumber('string'));
               console.log('Ext.isNumber(100) : ' + Ext.isNumber(100));

               console.log('Ext.isString(\'string\') : ' + Ext.isString('string'));
               console.log('Ext.isString(100) : ' + Ext.isString(100));

               console.log('Ext.isBoolean(\'true\') : ' + Ext.isBoolean('true'));
               console.log('Ext.isBoolean(true) : ' + Ext.isBoolean(true));

               console.log('Ext.isDefined(this) : ' + Ext.isDefined(this));
               console.log('Ext.isDefined(this.hoge) : ' + Ext.isDefined(this.hoge));
           }
        );
        -->
        </script>
    </head>

    <body>

    </body>
</html>

Ext.iterateからExt.isDefinedまでの動作をFirebugのconsole.logを用いて、出力を確認する。実際にWebブラウザでファイルを表示させる。

Firebugで各種メソッドの動作を確認

イテレート、各種型判定用のメソッドの動作を確認した。続いてはExt.chartの動作をチェックしてみよう。