Ext JS - FAQ

以下はExt JSに関してもっとも一般的な質問に対する回答です。質問に対する回答が見つからない場合、Ext JSフォーラムを参照するか、サポートチケットを申請してください。

質問をこのページに追加したほうがよいとお考えの場合は、お知らせください。

Ext JS 5がサポートするブラウザ

デスクトップ

  • IE8+(標準モードのみ)
  • Firefox(PCおよびMac)
  • Safari 6+
  • Chrome(PCおよびMac)
  • Opera(PCおよびMac)

タッチスクリーン

  • Safari
  • IE10以降
  • Android向けChrome

注意:Ext JS 5は現在のところ携帯電話はサポートしていません。

使用すべきDoctypeはなんですか。

HTML5 doctypeを使用することをお勧めしています。Internet Explorerが互換モードを有効にしないようにするためには、X-UA互換メタタグを使用することをお勧めします。例:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Sencha Cmdを使用せずにアプリケーションを構築する方法は?

フレームワーク、テーマCSS、好みのテーマのJSオーバーライドをindex.htmlファイルのヘッダーに含めることでSencha Cmdを使用せずにアプリケーションを構築できます。

テーマのCSSとオーバーライドファイルがExt JS 5でパッケージとして作成されます。アプリケーションはext/packagesの下にあります。含まれるテーマ:

  • ext-theme-base
  • ext-theme-classic
  • ext-theme-crisp
  • ext-theme-crisp-touch
  • ext-theme-gray
  • ext-theme-neptune
  • ext-theme-neptune-touch
  • ext-theme-neutral

Ext JSへようこそで、Sencha Cmdを使用しないでアプリケーションを設定する方法を参照できます。

注意:上記の例ではすべてを含んだ大規模ファイルが含まれるので、Sencha Cmdを使用することをお勧めします。Sencha Cmdを使用すると、アプリケーションは必要な部分だけを取得できるので、軽量で高い応答性とクリーンさを維持できます。

Sencha Cmdを使用せずにアプリケーションのテーマを変更する方法は?

アプリケーションのテーマを設定するには、テーマパッケージのCSSとJSオーバーライドをindex.html'sヘッダーに含めるだけです。例:

<head>
     <title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="ext/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script type="text/javascript" src="ext/build/ext-all-debug.js"></script>
        <script type="text/javascript" src="ext/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

デスクトップとiPad向けの両方に単一のアプリケーションを記述できますか。

はい、Ext JS 5アプリケーションはサポートされたブラウザであれば、デスクトップとタブレットやタッチスクリーンデバイスの両方で適切に表示されます。タブレットのサポートには通常他の手順が必要ありません。

ただし、場合によっては注意が必要な点が2つあります。最初は、Ext JS APIイベントリスナのみを使用する開発者には影響しません。ただし、リスナを直接アタッチするか、直接リスナをアタッチするサードパーティーJavaScriptライブラリを使用している場合、イベントリスナを直接アタッチするタイミングに問題が起こる可能性があります。これは、タッチジェスチャをサポートするためのイベントシステムへの変更に関係しています。

イベント委譲に関する変更に関する詳細は、イベントガイドおよびタブレットサポートガイドを参照してください。

2つ目のシナリオは、タッチ世界では対応するものがないマウスイベントへの対応です。例えば、タッチではmouseover、mouseout、mousenter、mouseleaveに相当するものがありません。

機能がアプリケーションにとって重要な場合、これらの操作の代替実装を提供する必要があります。これは、マウスイベントを適切なタッチジェスチャに置き換えることを意味します。

Ext JS 5がタブレットで動作するのにスマートフォンでは使用できない理由はなんですか。

デスクトップとタブレットのコントロールは現時点では小型画面には適していません。グリッド、ツリー、パネル、ボーダーレイアウトには適切に表示するためのスペースが必要です。動作するかもしれませんが、小型画面に適していると言えません。

TouchとExt JSにはそれぞれをサポートするプラットフォーム用に作成されたユニークなユーザーインターフェイスコントロールがあります。Ext JS 5はタブレットとコンピューターをサポートしますが、スマートフォンはサポートしませんので、UIコントロールは小型画面向きではりません。Sencha TouchのUIコントロールは小型画面向けに作成されていますが、タブレットでも使用できます。その答えは対象者によります。

コントローラ、ストア、モデルをExt Js 5とTouchで共有する方法は?

今後のバージョンのExt JSとTouchでは、データパッケージ全体を共有します。これによってExt/Touchアプリ間でのコード共有が可能になる予定ですが、その詳細については未定です。

Ext JS 4とExt JS 5での変更内容を確認する方法は?

新しく追加された機能を参照するには、Ext JS 5の新機能を参照してください。

削除、追加、非推奨などを参照するには、diff guideを参照してください。

Ext JS 5はExtJS 4よりも表のレンダリングが高速ですか。パフォーマンスは向上していますか。

一部では高速化されています。グリッドマークアップはバージョン5で行対応テーブルを使用するように変更されているので、グリッドのレンダリングは特に高速化されています。

フォームフィールドとボタン用のJSレイアウトは「liquid」CSSレイアウトに置き換えられています。大規模ドームを作成するために「フォームレイアウト」を使用するとパフォーマンスの向上が見られます。これらのタイプの向上はパフォーマンスに役立ちますが、今後の課題もあります。次回リリースではさらにパフォーマンスの向上が期待できます。

2つの異なるバージョンのExt JSを同時に使用できますか。

はい、最上位のJS名前空間を変更するために「サンドボックス化」ビルドを使用し、競合を避けるためにCSSプレフィックスを使用できます。2つの異なるバージョンを本番環境でサンドボックス化することはお勧めしない点に注意してください。これは、2つのフルバージョンのExt JSフレームワークをロードすることになるためです。

これは一般的な「サンドボックス化されていない」アプリケーションをロードするのと同じくらいリソースを消費するためです。サンドボックスビルドは、古いアプリケーションに新しい機能を含めるために一時的なニーズで移行するために使用されます。

Ext JS 5でローカリゼーションをどのように活用しますか。

ロケール特定のオーバーライドを使用するとアプリケーションにローカリゼーションを追加できます。これはapp.jsonファイルで設定できます。詳細についてはローカリゼーションガイドを参照してください。

ソースコードを編集せずにどのようにメソッドをオーバーライドしますか。

オーバーライドを作成するには次の方法をお勧めします。

Ext.define('MyApp.overrides.panel.Panel', {
    override: 'Ext.panel.Panel',
    close: function() {
        console.log('My Change to Close');
        this.callParent();
    },
    helloWorld: function(){
       console.log('Hello World');
    }
});

1) 最初に、アプリケーションのオーバーライドフォルダで適切な名前空間を使用してオーバーライドを定義します。

2) “override”コンフィグを追加し、オーバーライドするクラスに等しい値を与えます。この例は、‘Ext.panel.Panel’をオーバーライドします。

3) オーバーライドさせる関数を追加します。該当する項目すべてを維持する必要があります。この場合、コンソールログを追加してclose関数を変更しただけです。パネルを作成してpanel.close()を行うと、「My Change to Close」というメッセージを示すコンソールメッセージが表示されます。

注意:オーバーライドされたメソッドで、“this.callParent()”を実行してターゲットクラスで最初に提供されたメソッドを呼び出す必要があります。このメソッドをバイパスしてスーパークラスの実装(ターゲットクラスのメソッドのバグを避けるためなど)までスキップするには、“this.callSuper()”を代わりに呼び出すことができます。

4) 新しい関数をすべて一緒に追加します。お分かりのように、Ext.panel.Panelには“helloWorld”メソッドは含まれません。ただし、このオーバーライドで追加しました。ここで、パネルを作成して’panel.helloWorld()’を発行するとメッセージ“Hello World”がログされます。

5での描画クラスの使用方法はどのようになりますか。

描画パッケージがSencha-chartパッケージに含まれるようになりました。ただし、描画クラス(またはSenchaチャート)を使用するためにはSencha chartを含める必要があります。

Sencha Cmdを使用している場合、これは“sencha-charts”をapp.jsonファイルのrequiresブロックに追加するだけでシンプルに行うことができます。

Sencha Cmdを使用していない場合、“sencha-charts”パッケージを含めて、sencha-charts.jsとcssファイルをindex.htmlファイルに含める必要があります。

注意:パッケージフォルダはローカルのフレームワークのルートレベルにあります。

フレームワークはブラウザのズームをサポートしますか。

正式にはブラウザのズームはサポートしませんが、ほとんどのコンポーネントは最新ブラウザでは動作します。

callParentとは何ですか。また使用する理由と方法はなんですか。

callParentは、ベースクラスのメソッドを呼び出すために使用される、Senchaクラスシステム(Ext JSとSencha Touch共通)が提供するメソッドです。これは通常、フレームワーククラスから派生し、onRenderなどの提供するメソッドをオーバーライドする場合に行われます。パラメータのあるメソッドからcallParentを呼び出すには、これらのパラメータに加えてベースクラスメソッドに渡す方法が2つあります。特に必要なパラメータのみを利用することが最もお勧めする方法です。この場合、これらの引数を配列文字列で渡すことができます。

onRender: function (parentNode, index) {
    this.callParent([ parentNode, index ]);
}

または、次のように短縮形の引数のキーワードも使用できます。

Ext.define('App.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    onRender: function (parentNode, index) {
        this.callParent(arguments);
    }
});

その違いはわずかですが、Sencha Cmd 5を使用する場合には、callParentの新しい最適化機能、パフォーマンスの向上は大きなものです。最適化が有効になっていると、これらの2つのメソッドは次のように最適化できます。

onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.apply(this, arguments);
}

または:

onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.call(this, parentNode, index);
}

2つ目のケースでは、最適化はapplyではなくJavaScript関数でcallメソッドを使用できます。さらに、引数を使用するのは避けます。いずれも高パフォーマンスのためには使用しないことが知られています。結局、配列文字列も作成しないようにします。明らかに最適化を有効にするだけでも便利ですが、パフォーマンスが最も重要なコードでは引数を明示的な配列に置き換えることを意味があります。

CDNはどのように使用しますか。

コンテンツデリバリネットワークまたはコンテンツ配信ネットワーク(CDN)は、ウェブにおいてマルチメディアデータセンターに配備されるサーバーの大規模分散型システムです。

当社のCDNは、Ext JSをすぐに使い始めるためシンプルな方法を提供します。プロトタイプや最適化やスピードが求められない「1回限りの」小規模プロジェクトでは、CDNを使用することが最適です。

当社のCDNは本番アプリケーションには理想的ではなく、推奨されません。さらに、CDNサービス稼働時間や今後の可用性については保証していません。

Ext JS 5.0.0

Classic

テーマCSS

Core JS

Neptune

テーマCSS

Core JS

テーマJSオーバーライド

Crisp

テーマCSS

Core JS

テーマJSオーバーライド

Ext JS 4.2.1

Classic

テーマCSS

Core JS

Neptune

テーマCSS

Core JS

テーマJSオーバーライド

Last updated