6

私はちょうどSencha Touch 2 MVCを手に入れようとしています。 Ext 3の経験は大変ですが、これはまったく新しい世界です。Ext.define/Ext.extend in Sencha Touch 2

私は非常に遠くから見ることはできません。私はインターネット上で見たことに基づいて2つの方向で自分のコードを取りましたが、どちらも動作しません。

パス1

マイapp.js:

Ext.application({ 
     name: 'BkAdmin', 
     views: ['LoginForm'], 
     launch: function() { 
      Ext.create('BkAdmin.view.LoginForm'); 
    } 
}); 

マイビュー/ LoginForm.js:

Ext.define('BkAdmin.view.LoginForm', { 
     extend: 'Ext.form.FormPanel', 
     config: { 
      fullscreen: true, 
      initComponent: function() { 
         alert('yo!'); 
         BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
      } 
     } 
    } 
); 

これは、エラーのないロードして、私もでフォーム項目を追加することができますconfigセクション。しかし、initComponent()は決して呼び出されないので、ビューは完全に柔軟ではありません。

パス2

マイapp.js:

Ext.application({ 
    name: 'BkAdmin', 
    views: ['LoginForm'], 
    launch: function() { 
    BkAdmin.view.LoginForm = new BkAdmin.view.LoginForm(); 
    } 
}); 

マイビュー/ LoginForm.js:

BkAdmin.view.LoginForm = Ext.extend(Ext.form.FormPanel, { 
    fullscreen: true, 
    initComponent: function() { 
       alert('yo!'); 
     BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
    } 
}); 

このフラットアウトが動作しません。 Chromeは 'プロパティを設定できません' '未定義のLoginForm' ...どのように地球上で未定義になったのですか?また、 'BkAdmin.view.LoginForm'というファイルがロードされても、次のクラスは宣言されません。 '確かに私に宣言されたルックス。

多くの質問はここにあります:上記のパスで何が間違っていましたか?パス1でinitComponent()を呼び出し、パス2を動作させるにはどうすればよいですか?どのコードが引用符で囲まれていますか?

ありがとうございます!

答えて

7

パス1は(ほぼ)正しい方法です。新しいクラスシステム(Ext JS 4によく似ている)のため、Ext.defineを使用していて、Ext.extend(非常にうまく動作しません)を使用する必要があります。

ブロックconfigブロックは、そのクラスのクラス/ドキュメントで定義されている構成でのみ使用されます。 fullscreen,items,cls,styleなどがあります。その中に定義されている他のものは、ではないブロックconfigブロックはinstance.configに格納されます。

代わりに、あなたはExt.defineの主な構成オブジェクトで上書きしたいメソッド置くべきである:

Ext.define('MyApp.view.MyView', { 
    extend: 'Ext.Component', 

    config: { 
     cls: 'custom-cls', 
     html: 'Some html' 
    }, 

    initComponent: function() { 
     // do something 
    } 
}); 

煎茶も煎茶タッチ2.0にinitComponentを廃止予定しています。クラスのインスタンス化時に呼び出されるメソッドが必要な場合は、initializeメソッドを使用する必要があります。あなたが本当ににする必要がない限り、理想的にはinitializeの内部に設定しないでください。あなたはいつもそれらをconfigブロックの中に入れてください。

最後に、あなたが使用して拡張クラスのメソッドを呼び出すことができます。

this.callParent(arguments); 

のExt JS 3.xとのExt JS 4.xの間の階級制度の変更に関するガイドは利用できるがあるhereいますあなたに助けになるかもしれません。 Sencha Touch 2.x hereの最新のクラスシステムガイドもあります。