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

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工作？引用哪个代码 - unquote更好用？

谢谢!

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也在initComponentSencha Touch 2.0中弃用.当您需要在实例化类时调用的方法时,您应该使用该initialize方法.请注意,理想情况下,initialize除非您确实需要,否则不应在内部设置配置.你应该总是将它们放在config块内.

最后,您可以使用以下命令调用扩展类的方法:

this.callParent(arguments);

有关于Ext JS的3.x和可用的Ext JS 4.x版之间的变化对类系统的指导这里这可能是对你有所帮助.还有一个更新的类系统指南煎茶触摸2.X 这里.