javascript Ext.define() 中关于 initComponent() 的最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6871594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best Practices concerning initComponent() in Ext.define()
提问by hynek
I'm writing all my components in ExtJS's new MVC fashion using Ext.define().
我正在使用 ExtJS 的新 MVC 方式编写所有组件Ext.define()。
I struggle a bit whether define properties inside of initComponent()or by simply setting them like property: 42,.
无论是在内部定义属性initComponent()还是简单地将它们设置为property: 42,.
Are there widely accepted best practices?
是否有被广泛接受的最佳实践？
I'm staggering between using initComponent()only when necessary (ie. when I want something dynamic or set a scope) which keeps the function shorter and spares me some ugly this.s and using it always which has the benefit, that I'd never have to move former properties to initComponent()just because I want to make it more dynamic.
我在initComponent()仅在必要时使用（即，当我想要一些动态的东西或设置范围时）之间摇摆不定，这使函数更短并避免了一些丑陋的this.s 和总是使用它有好处，我永远不必移动以前的属性initComponent()只是因为我想让它更有活力。
Unfortunately, Sencha's docs don't tell much about that and the available examples seem to do as they want.
不幸的是，Sencha 的文档并没有详细说明这一点，并且可用的示例似乎可以按照他们的意愿行事。
采纳答案by Lionel Chan
Personal practice, I will declare variables in the properties area when the
个人实践，我会在属性区声明变量的时候
- variables defining magnitude, like
x,y,width,height - variables that awaiting to be overridden, or customizable, like
title,saveBtnTxt,url,fields,iconCls - some constants, that will have special prefixes so will not be overridden so easily
- 定义幅度的变量，如
x,y,width,height - 等待被覆盖或可定制的变量，例如
title,saveBtnTxt,url,fields,iconCls - 一些常量，它们会有特殊的前缀，所以不会那么容易被覆盖
Then I will declare items, listeners, this.on, Ext.apply(me, {..})or anything that requires the scope of the obj (this, me), to sit inside my initComponent. Or stuff that should be modified/overridden before everything is setting up so user will not break my component by overriding some of the important variables.
然后我将声明items, listeners, this.on,Ext.apply(me, {..})或任何需要 obj ( this, me)范围的东西，放在我的initComponent. 或者在一切设置之前应该修改/覆盖的东西，这样用户就不会通过覆盖一些重要的变量来破坏我的组件。
Of course that'll serve as my guidance. 2 cents
当然，这将作为我的指导。2 美分
EDIT
编辑
About the ugly this, I have used the variable mewidely in my app, and it looks a lot cleaner than this. It benefits me from changing scopes less frequently too.
关于丑陋的this，我me在我的应用程序中广泛使用了该变量，它看起来比this. 它也从不那么频繁地更改范围中受益。
回答by Molecular Man
I want to add to Lionel's answer that it is better to declare any non-primitiveconfig in initComponent. (By primitive I mean string, boolean and number). Array and Object go into initComponent.
So definition should look like this:
我要添加到梅西的回答，这是更好声明任何非基本的配置initComponent。（原语是指字符串、布尔值和数字）。数组和对象进入initComponent.
所以定义应该是这样的：
Ext.define('My.NewClass', {
extend: 'OldClass',
// here all primitive configs:
cls: 'x-my-cls',
collapsible: true,
region: 'west',
// and so on ...
initComponent: function() {
// here you declare non-primitive configs:
this.tbar = [/* blah-blah */];
this.columns = [/* blah-blah */];
this.viewConfig = {/* blah-blah */};
// and so on ...
this.callParent(arguments);
}
// other stuff
}
The reason why you should put all non-primitive configs into initComponent is that otherwise configs of all instances will refer to the same objects. For example if you define NewClass like:
您应该将所有非原始配置放入 initComponent 的原因是，否则所有实例的配置将引用相同的对象。例如，如果您像这样定义 NewClass：
Ext.define('My.NewClass', {
extend: 'OldClass',
bbar: Ext.create('Ext.toolbar.Toolbar', {
// ...
bbars of all instances will refer to the same object. And therefore every time you create new instance bbar disappears from the preveous instance.
bbar所有实例的 s 将引用同一个对象。因此，每次您创建新实例时，bbar 都会从之前的实例中消失。
回答by Kunal
Ext.define('My.Group', {
// extend: 'Ext.form.FieldSet',
xtype : 'fieldset',
config : {
title : 'Group' + i.toString(),
id : '_group-' + i.toString()
},
constructor : function(config) {
this.initConfig(config);
return this;
},
collapsible: true,
autoScroll:true,
.....
});
you can use it as follow.
您可以按如下方式使用它。
handler : function() {
i = i + 1;
var group = new My.Group({
title : 'Group' + i.toString(),
id : '_group-' + i.toString()
});
// console.log(this);
// console.log(group);
Ext.getCmp('panelid').insert(i, group);
Ext.getCmp('panelid').doLayout();
}
