Remplacement du mappage existant dans ExtJS 5.1.1

Question

Je crée une classe Viewport et comprend 3 éléments à l'intérieur; a En-tête avec la classe de base 'container.Container', un Grille avec 'grid.Panel' et un Formulaire avec form.Panel. Le problème est que ExtJS remplace l'en-tête que j'ai créé et restitue à 'Grid Panel'; comme vous devinerez qu'il contient une plus petite « tête » intérieur du panneau et donne ces erreurs:

[W] Overriding existing mapping: 'widget.header' From 'Ext.panel.Header' to 'Employee.view.MainHeader'. Is this intentional? 
[W] Overriding existing mapping: 'widget.gridpanel' From 'Ext.grid.Panel' to 'Employee.view.GridPanel'. Is this intentional? 

Voici comment il ressemble! Je n'ai défini aucun alias ni à la classe d'en-tête ni au gridpanel. Seulement donné la propriété xtype c'est tout. Pourquoi est-ce possible?

Merci?

Voici en-tête:

Ext.define('Employee.view.MainHeader', { 
    extend: 'Ext.container.Container', 
    xtype: 'header', 
    requires: [ 
     'Ext.button.Button', 
     'Ext.form.field.Text' 
    ], 
    layout: { 
     type: 'hbox', 
     align: 'center' 
    }, 
    initComponent: function() { 
     var me = this; 
     Ext.apply(me, { 
      items: [{ 
       xtype: 'container', 
       width: 600, 
       padding: 5, 
       items: [{ 
        xtype: 'image', 
        height: 95, 
        width: 95, 
        src: 'https://openclipart.org/image/2400px/svg_to_png/69109/Free-Culture-Logo-Orange.png' 
       }] 
      }, { 
       xtype: 'container', 
       cls: 'search', 
       items: [{ 
        xtype: 'textfield', 
        width: 350 
       }, { 
        xtype: 'button', 
        text: 'Search', 
        handler: function() { 
         alert('this is the Search feature!'); 
        } 
       }] 
      }] 
     }); 
     me.callParent(arguments); 
    } 
}); 

et GridPanel:

Ext.define('Employee.view.GridPanel', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'gridpanel', 
    store: 'EmployeeStr', 
    title: 'ORest Employee Table', 
    viewConfig: { 
     markDirty: false, 
     stripeRows: false 
    }, 
    initComponent: function() { 
     var me = this; 
     Ext.apply(me, { 
      tools: [{ 
       type: 'refresh', 
       tooltip: 'Refresh the DB', 
       handler: function() {alert('Refresh click');} 
      }], 
      columns: [{ 
       xtype: 'numbercolumn', 
       dataIndex: 'id', 
       flex: 0, 
       text: 'ID' 
      }, { 
       xtype: 'gridcolumn', 
       dataIndex: 'code', 
       flex: 1, 
       text: 'Code' 
      }, { 
       xtype: 'gridcolumn', 
       dataIndex: 'firstName', 
       flex: 1, 
       text: 'First Name' 
      }, { 
       xtype: 'gridcolumn', 
       dataIndex: 'lastName', 
       flex: 1, 
       text: 'Last Name' 
      }, { 
       xtype: 'gridcolumn', 
       dataIndex: 'email', 
       flex: 1, 
       text: 'Email' 
      }, { 
       xtype: 'gridcolumn', 
       dataIndex: 'active', 
       flex: 0, 
       text: 'Status' 
      }], 
      dockedItems: [{ 
       xtype: 'pagingtoolbar', 
       store: 'EmployeeStr', 
       dock: 'bottom', 
       displayInfo: true 
      }] 
     }); 
     me.callParent(arguments); 
    } 
}); 

Answer 1

Il semble que vous écrasez par vos paramètres de xtype (de GridPanel, en-tête) les alias prédéfinis définis par ExtJS.

Jetez un coup d'œil au code source, par ex. ExtJS GridPanel:

...  
alias: ['widget.gridpanel', 'widget.grid'] 
... 

L'avertissement devrait disparaître si vous définissez d'autres noms pour xtype que vous devriez de toute façon pour faire la distinction entre vos composants et Thos eprovided par ExtJS.