正確的方式來擴展Ext.panel.Panel？

Question

我正在使用Ext JS 4.1.1爲網頁創建一個GUI。我試圖創建一個組件（'GeneSearchComponent'），我可以在更復雜的佈局中使用它。但由於某種原因，我無法將'GeneSearchComponent'的實例插入hpanel。我在擴展預定義的'Ext.panel.Panel'類（以及創建我自己的「小部件」）時缺少什麼？

如果我刪除對「Ext.create('gene-search-component', ...」的呼叫，則一切正常;如果我把它放回去，一切都會中斷。我想知道爲什麼。

（我還沒有包括「基因組合框」。我非常確信，這不是我的問題的根本原因。）的定義

感謝您的時間！

圖奧馬斯

Ext.define('GeneSearchComponent', { 
    extend: 'Ext.panel.Panel', 
    alias: ['gene-search-component'], 
    constructor: function(cnfg) { 
     this.callParent(arguments); 
     this.initConfig(cnfg); 
    }, 
    config: { 
     collapsible: true, 
     frame: true, 
     title: 'Search', 
     bodyPadding: '15 15 15 15', 
     width: 350, 
     layout: { 
      type: 'vbox', 
      align: 'left' 
     }, 
     items: [ 
      Ext.widget('gene-combobox', { 
       id: 'comboboxid' 
      }), 
      Ext.create('Ext.Button', { 
       text: 'Search', 
       handler: function() { 
        dosomething(); 
     }})] 
    }, 
    onRender: function() { 
     this.callParent(arguments); 
    } 
}); 

Ext.application({ 
    name: 'FW', 
    launch: function() { 
     var bd = Ext.getBody(); 
     var div = Ext.get("search_form"); 

     var hpanel = Ext.create('Ext.panel.Panel', { 
      id: 'horizontal-panel', 
      title: "HBoxLayout Panel", 
      layout: { 
       type: 'hbox', 
       align: 'middle' 
      }, 
      items: [ 
       Ext.create('Ext.container.Container', { 
        id: 'another-panel', 
        title: "VBoxLayout Panel", 
        width: 250, 
        layout: { 
         type: 'vbox', 
         align: 'left' 
        }, 
        items: [{ 
         xtype: 'panel', 
         width: 250, 
         title: ' Panel One', 
         flex: 2 
        },{ 
         xtype: 'panel', 
         width: 250, 
         title: ' Panel Two', 
         flex: 1 
        },{ 
         xtype: 'panel', 
         width: 250, 
         title: ' Panel Three', 
         flex: 1 
       }]}), 
       Ext.create('gene-search-component', { 
        id: 'searchPanel', 
      })], 
      renderTo: div, 
     }); 
    } 
});