Sencha Touch 2中的Ext.define/Ext.extend 2

Question

我剛開始接聽Sencha Touch 2 MVC。我有很強的Ext 3體驗，但這是一個全新的世界。

我似乎無法在構建視圖時走的太遠。根據我在互聯網上看到的內容，我已經採取了兩個方向的代碼，但都不成功。

路徑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); 
      } 
     } 
    } 
); 

這會將無差錯，我甚至可以添加表單項目配置部分。但是，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工作？哪個代碼更好用？

謝謝！

Answer 1

路徑1是（幾乎）正確的方式。你應該使用Ext.define而不是Ext.extend（它不能很好/可靠地工作），因爲新的類系統（很像Ext JS 4）。

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也有更新的班級系統指南。