路径1

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

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

最后，您可以使用：

调用扩展类的方法

this.callParent(arguments);

有一个关于Ext JS 3.x和Ext JS 4.x可用here之间的类系统更改的指南，这可能对你有所帮助。 Sencha Touch 2.x here还有一个更新的课程系统指南。

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

路径1

路径2

1 个答案: