Sencha Touch 2中的Ext.define/Ext.extend 2
我刚开始接听Sencha Touch 2 MVC。我有很强的Ext 3体验,但这是一个全新的世界。Sencha Touch 2中的Ext.define/Ext.extend 2
我似乎无法在构建视图时走的太远。根据我在互联网上看到的内容,我已经采取了两个方向的代码,但都不成功。
路径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工作?哪个代码更好用?
谢谢!
路径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也有更新的班级系统指南。