Ext.define/Ext.extend in Sencha Touch 2

Ext.define/Ext.extend in Sencha Touch 2

本文关键字：Ext Touch Sencha extend define in      更新时间：2023-09-26

我刚刚开始学习Sencha Touch 2 MVC。我有丰富的Ext 3经验，但这是一个全新的世界。

我似乎在构建一个视图方面走不了多远。根据我在互联网上看到的内容，我把代码分为两个方向，但都不起作用。

路径1

我的应用程序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

我的应用程序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"。"

这里有很多问题：我在上述道路上做错了什么？如何让initComponent（）在路径1中被调用，并让路径2工作？哪个代码更适合使用引号？

谢谢！

路径1是（几乎）正确的方法。您应该使用Ext.define，而不是Ext.extend（它不能很好/可靠地工作），因为有了新的类系统（很像ExtJS 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
    }
});

Sencha也反对在Sencha Touch 2.0中使用initComponent。当您需要在类实例化时调用一个方法时，应该使用initialize方法。请注意，理想情况下，除非真的需要，否则您不应该在initialize中设置配置。您应该始终将它们放在config块中。

最后，您可以使用以下方法调用扩展类的方法：

this.callParent(arguments);

这里有一个关于ExtJS3.x和ExtJS4.x之间的类系统更改的指南，这可能会对您有所帮助。这里还有Sencha Touch 2.x的最新课程系统指南。

相关文章：