web-dev-qa-db-ja.com

ExtJS 4でExt.defineを使用する方法

私はExtJS 4を使い始めたばかりで、Ext.defineの仕組みを理解するための助けが必要です。

実際、私がしたいのは、ポータルの例にあるポートレットに似たものです。アプリケーションでは、さまざまなタブに追加するオブジェクトが非常に多くなるので、コードを整理し、1つの非常に大きなスクリプトだけではなく、必要な各コンポーネントを個別のファイルで定義し、必要なときにメインスクリプトで呼び出したい（主に例を使用するので、Ext.defineがどのように機能するかを知りたいので、これらの例を使用して、希望どおりに機能させることができます）。

私は明確だったと思います。

よろしくお願いします。

extjsportletextjs4
21
Armance

Ext.define（String className、Object data、Function createdFn）：Ext.Base

Ext.define is used to define a class. Example:

// creates My.computer.NoteBook Class
Ext.define('My.computer.NoteBook', {

     extend:'Ext.panel.Panel',

     config: {

          hardware:'Dell',
          os:'Linux',
          price:500
     },

     constructor:function(config) {

          this.initConfig(config);

          return this;
     }
});


// creates instance of My.computer.NoteBook Class
var myComputer = Ext.create('My.computer.NoteBook', {

     hardware:'MacBook Pro',
     os:'Mac OS X',
     price:1800
});

そのため、Ext.defineを使用して型を作成し、多くの場合、後で使用できます。幅、高さ、ID、CSSを定義できるため、後でそのモールド/クラスを呼び出すだけです。あなたのケースでは、すべてのタブのクラスを定義することができ、そのタブを開く/作成する関数を作成するとき、あなたは言うことができます：

if(existingTab){

    mainPanel.setActiveTab(existingTab);

}else{

    mainPanel.add(Ext.create('My.computer.NoteBook', {id:tabId})).show();   
}
...

すべてのクラスを個別の.jsファイルに入れることができます。後で、本番環境では、すべてのクラスを1つの縮小した.jsファイルに含むclass.jsを作成します。

クラスを定義して、次のように言うことができます。

items: Ext.create("My.computer.NoteBook",{
        ...
})
24
Davor Zubak

Ext JS 4には拡張する新しい方法があります...これはExt.defineを呼び出し、Ext JS 3以前で実行する必要があったExt.extend、Ext.reg、Ext.nsを1つのメソッド呼び出しに組み込みます...

Ext.define('com.sencha.MyPanel', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.mypanel',
    ...
    ...
});

Ext.defineは2つのパラメータを取ります。1つ目は完全なクラス名（パスを作成するExt.nsとして機能し、オブジェクトを作成します）と構成です。 configでは、extend configを使用して、拡張するクラスを指定します。エイリアス設定を使用してXTypeを設定します。エイリアス設定は2つの部分があるため少し異なります...最初の部分はタイプ（この場合はウィジェット）であり、次にXType（mypanel）です。

14
Kunal