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