to initComponent () or not To initComponent ()

Se você não tem uma compreensão profunda de como funciona o sistema de classes ExtJS, você pode querer seguir isto:

Declare todos os tipos não primitivos em {[[0]}.

Terminologia

• tipos primitivos - cadeias, booleanos, inteiros, etc.
• não primitivos - arrays & objects.

Explicação

Se o componente que extende for criado mais de uma vez, quaisquer configurações não primitivas serão declaradas como um a opção de configuração (fora de initComponent) será partilhada entre todas as instâncias.

Este comportamento é explicado na resposta da sra abaixo e no artigo deste Skirtle's Den. Você também pode querer ler esta pergunta assim .

Em Primeiro Lugar, vou tomar posição sobre os meus comentários.:

Agora o que eu penso sobre isso.

initComponent () deve resolver qualquer coisa necessária no tempo de uma instância desta classe é criada. Nem mais, nem menos.

Podes estragar uma carga quando definir classes e a maior parte disso acontece porque as pessoas não entendem como funciona o sistema de classes ExtJS. Como se trata de componentes, o seguinte vai se concentrar neles. Também será um exemplo simplificado que só deve mostrar uma espécie de erro que eu vi muitas vezes.

Ext.define('Custom', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.custpanel',

    foo: {
        bar: null  
    },

    initComponent: function() {
        this.callParent(arguments);
    }
});

store: {
    fields: [ ... ],
    proxy: {
        type: 'direct',
        directFn: 'Direct.Store.getData'
    }
}

A maioria das pessoas não vê nenhuma diferença entre este pequeno objeto foo e uma configuração (ExtJS) que é basicamente correto porque ambos são objetos (instâncias). Mas a diferença é que todas as classes enviadas pelo sencha sabem perfeitamente quais as propriedades de configuração que eles esperam e cuidar deles.

Por exemplo, a propriedade da loja de uma grelha é resolvida pelo StoreManager e pode, portanto, ser:

• storeId fio, ou
• conservar instância ou
• guardar o objecto de configuração.

Sim, há uma diferença entre uma definição de classe e a instância criada a partir dela. Mas precisamos cuidar de qualquer nova propriedade que contenha uma referência como o foo de cima e que não seja tão complicado. Eis o que precisamos para o Corrigir para o exemplo foo

Ext.define('Custom', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.custpanel',

    foo: {
        bar: null  
    },

    initComponent: function() {
        this.foo = Ext.apply({}, this.foo);
        this.callParent(arguments);
    }
});

Agora tratamos da configuração foo Quando uma instância é criada. Agora este exemplo foo é simplificado e nem sempre será tão fácil resolver uma configuração.

Conclusão

Escreva sempre a sua definição de classe como configurações! Não devem conter todas as instâncias referidas, excepto a configuração simples e deve Cuide-se destes para resolvê-los quando uma instância é criada.

Declaração de exoneração de Responsabilidade

não pretendo cobrir tudo com esta escrita muito curta!

Normalmente defendo que se tenha o máximo de configuração possível nas opções de configuração da classe, porque lê-se melhor e é mais fácil de sobrepor nas subclasses. Além disso, há uma forte possibilidade de que, no futuro, o CMD do Sencha tenha Otimizado o compilador para que, se você mantiver o seu código declarativo, ele possa se beneficiar de otimizações.

Comparar:

Ext.define('MyPanel', {
    extend: 'Ext.grid.Panel',

    initComponent: function() {
        this.callParent();
        this.store = new Ext.data.Store({
            fields: [ ... ],
            proxy: {
                type: 'direct',
                directFn: Direct.Store.getData
            }
        });
        this.foo = 'bar';
    }
});

...

var panel = new MyPanel();

E:

Ext.define('MyPanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mypanel',

    foo: 'bar',

    store: {
        fields: [ ... ],
        proxy: {
            type: 'direct',
            directFn: 'Direct.Store.getData'
        }
    }
});

...

var panel = Ext.widget({
    xtype: 'mypanel',
    foo: 'baz'
});

Note como estas abordagens são muito diferentes. No primeiro exemplo, estamos hardcoding a lote: valores da propriedade do objeto, configuração da loja, Nome da classe MyPanel quando é usado; estamos praticamente matando a idéia de uma classe porque ela se torna inextensível. No segundo exemplo, estamos criando um modelo que pode ser reutilizado muitas vezes com configuração possivelmente diferente-basicamente, é disso que se trata todo o sistema de classes.

É bom saber que os objetos da opção class config são compartilhados e você precisa inicializá-los/processá-los por exemplo, mas o código pode ir para o construtor, bem como para a função initComponent ().

AbstractComponent/ctor:
- stuffBeforeIC()
- initComponent()
- stuffAfterIC()

constructor: function () {
  yourStuffBefore();
  this.callParent(arguments);
  yourStuffAfter();
},
initComponent: function () {
  this.callParent();
  yourInitComp()
}

- yourStuffBefore()
- base's ctor by callParent:
  - stuffBeforeIC()
  - initComponent:
    - base's initComponent by callParent
    - yourInitComp()
  - stuffAfterIC()
- yourStuffAfter()