Развертывание собственных классов

Question

Я разрабатываю приложение с несколькими окнами. Многие окна похожи, поэтому я думаю написать суперкласс и расширить его.

У меня есть, суперкласс:

Ext.define('AM.view.ui.DecoratorAbstract',{ 
    extend: 'Ext.window.Window', 
    alias: 'widget.decoratorAbstract', 

    initComponent: function(){ 
     this.title = this.aTitle; 
     this.resizable = this.cfg[0]; 
     this.closable = this.cfg[1]; 
     this.minimizable = this.cfg[2]; 
     //this.items = this.anItem; 
     this.callParent(arguments); 
    } 
}); 

И подкласс:

Ext.define('AM.view.ui.DecoratorForm',{ 
    extend: 'AM.view.ui.DecoratorAbstract', 
    alias: 'widget.decoratorForm', 

    initComponent: function(){ 
     this.callParent(); 
     this.buttons = [ 
      { text:'Guardar', action:'save', iconCls: 'ico-save' }, 
      { text:'Cancelar', action:'cancel', iconCls: 'ico-cancel' } 
     ]; 
    } 
}); 

Оба класса включены в контроллере:

Ext.define('AM.controller.Ui',{ 
    extend: 'Ext.app.Controller', 

    views: [ 
     'ui.Toolbar', 
     'ui.Statusbar', 
     'ui.AlertErr', 
     'ui.AlertOk', 
     'ui.AlertWar', 
     'ui.AlertDelete', 
     'ui.AlertUndelete', 
     'ui.DecoratorAbstract', 
     'ui.DecoratorForm', 
     'ui.DecoratorGrid' 
    ], 
    model: [], 
    store: [], 
}); 

из Firebug расслоение плотной консоли я создать подкласс:

Ext.create('AM.view.ui.DecoratorForm',{cfg:[true,true,true],aTitle: 'Title'}).show(); 

Окно отображается, но не кнопки. Любые идеи?.

Answer 1

Что делать, если вы двигаетесь

this.callParent(arguments); 

К концу InitComponent в вашем DecoratorForm.

Answer 2

Здесь есть несколько вещей ... Сначала переместите this.callParent() в конец вашего initComponent. Это связано с тем, что 810 дальше наследования делает что-то с this.buttons, и вам не хватает этого, вызывая callParent перед настройкой кнопок.

Далее, вы действительно не должны использовать эту cfg вещи, которую вы передаете в Просто передать в параметрах конфигурации, которые вы хотите использовать, и они будут доступны:.

Ext.define('AM.view.ui.DecoratorAbstract',{ 
    extend: 'Ext.window.Window', 
    alias: 'widget.decoratorAbstract', 

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

Ext.define('AM.view.ui.DecoratorForm',{ 
    extend: 'AM.view.ui.DecoratorAbstract', 
    alias: 'widget.decoratorForm', 

    initComponent: function(){ 
     this.buttons = [ 
      { text:'Guardar', action:'save', iconCls: 'ico-save' }, 
      { text:'Cancelar', action:'cancel', iconCls: 'ico-cancel' } 
     ]; 
     this.callParent(); 
    } 
}); 

//to instantiate: 
Ext.create('AM.view.ui.DecoratorForm',{ 
    resizable: true, 
    closable: true, 
    minimizable: true, 
    title: 'Title' 
}).show(); 

В любое время вы пытаетесь чтобы «обмануть» компонент, используя массив типа cfg, вы должны, вероятно, подумать над тем, что вы делаете, и посмотреть, есть ли более разумный способ.

Еще одна вещь, которую вы должны изучить, - Ext.apply(). Это сэкономит массу байтов, изменив то, что у вас было раньше:

Ext.apply(this, { 
    title: 'my title', 
    resizable: cfg[0], 
    closable: cfg[1], 
    ///...etc... 
})