無法創建無法識別別名的實例：[object object]

Question

我一直在嘗試將自定義類添加到我的某個視圖中，但是當我運行該應用程序時，控制檯日誌中出現錯誤「無法創建無法識別的別名實例：widget。[object Object]「。我的代碼如下：

SubCategoryListView.js

Ext.define('RestaurantGlobal.view.SubCategoryListView',{ 
     extend: 'Ext.List', 
     xtype: 'SubCategoryListView', 

     requires: ['RestaurantGlobal.store.ItemColumnsStore'], 

config:{ 
    items:[ 
     { 
      xtype: Ext.create('Ext.List', { 
       fullscreen: true, 
       items: [{ 
        xtype: 'toolbar', 
        docked: 'top', 
        ui: 'neutral', 
        items: [ 
         { 
          text:'Veg', 
          align :'center', 
          handler: function() { 
           var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore'); 
           // clear all existing filters 
           sto.clearFilter(); 
           sto.filter('Info2', 'False'); 
          } 
         }, 
         { 
          text:'Non-Veg', 
          align :'center', 
          handler: function() { 
           var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore'); 
           // clear all existing filters 
           sto.clearFilter(); 
           sto.filter('Info2', 'True'); 
          } 
         }, 
        ], 
        store: 'RestaurantGlobal.store.ItemColumnsStore', 
        itemTpl: ['{Name} {Image}'] 
       }], 
      }), 
     } 
    ] 
    } 
}); 

SubCategories.js

 Ext.define('RestaurantGlobal.view.SubCategories', { 
extend: 'Ext.Panel', 

requires : ['RestaurantGlobal.view.SubCategoryListView'], 

config: { 
    styleHtmlCls: 'maincontainer', 
    styleHtmlContent: true, 
    layout: { 
     type: 'vbox' 
    }, 
    items: [ 
     { 
      xtype: 'titlebar', 
      flex: 0.5, 
      docked: 'top', 
      title: 'Category Name' 
     }, 
     { 
      xtype: 'SubCategoryListView', 
     }, 

      { 
      xtype: 'container', 
      items: [ 
       { 
        xtype: 'button', 
        docked: 'bottom', 
        margin: '0 0 0 0', 
        text: 'Place Order' 
       } 
      ] 
     } 
    ] 
    } 
}); 

請幫我在這方面。另外，是否有一種方法可以過濾單個商店，將它們顯示在同一個Tabpanel的2個選項卡中？

我沒有在這種情況下使用選項卡面板。

Answer 1

罪魁禍首是這樣的：

xtype: Ext.create('Ext.List', { 

xtype必須是一個字符串。

可以theoritically直接把組件實例在items：

items:[ 
    Ext.create('Ext.List', { 
     fullscreen: true, 
     items: [{ 
      xtype: 'toolbar', 
      docked: 'top', 
      ui: 'neutral', 
      items: [ 
       { 
        text:'Veg', 
        align :'center', 
        handler: function() { 
         var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore'); 
         // clear all existing filters 
         sto.clearFilter(); 
         sto.filter('Info2', 'False'); 
        } 
       }, 
       { 
        text:'Non-Veg', 
        align :'center', 
        handler: function() { 
         var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore'); 
         // clear all existing filters 
         sto.clearFilter(); 
         sto.filter('Info2', 'True'); 
        } 
       }, 
      ], 
      store: 'RestaurantGlobal.store.ItemColumnsStore', 
      itemTpl: ['{Name} {Image}'] 
     }], 
    } 
] 

但是，在一個類定義真的是病了靈感，因爲此相同的組件實例將被創建的每個實例中使用的情況下你的班級。最有可能導致很多問題......

如果你真的需要自己創建的組件實例，因爲你不能簡單地宣佈它的配置，做到這一點通過重寫initComponent方法，並創建組件在那裏。將爲每個類的新實例調用initComponent方法，因此每個實例都有它自己的子組件實例（對不起，我知道這使得「實例」這個單詞有很多重複）。

無論如何，這似乎是你真正想要做的是簡單地覆蓋列表類：

Ext.define('RestaurantGlobal.view.SubCategoryListView',{ 
    extend: 'Ext.List', 
    xtype: 'SubCategoryListView', 

    requires: ['RestaurantGlobal.store.ItemColumnsStore'], 

    // You class is already a list, just add your custom configuration 
    // directly to it: 
    config:{ 
     fullscreen: true, 
     items: [{ 
      xtype: 'toolbar', 
      docked: 'top', 
      ui: 'neutral', 
      items: [{ 
       text:'Veg', 
       align :'center', 
       handler: function() { 
        var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore'); 
        // clear all existing filters 
        sto.clearFilter(); 
        sto.filter('Info2', 'False'); 
       } 
      },{ 
       text:'Non-Veg', 
       align :'center', 
       handler: function() { 
        var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore'); 
        // clear all existing filters 
        sto.clearFilter(); 
        sto.filter('Info2', 'True'); 
       } 
      }], 
      store: 'RestaurantGlobal.store.ItemColumnsStore', 
      itemTpl: ['{Name} {Image}'] 
     }] 
    } 
}); 

Answer 2

Ext.define('RestaurantGlobal.view.SubCategoryListView',{ 
    extend: 'Ext.List', 
    *xtype: 'SubCategoryListView',* 

的問題是，你使用的xtype類的定義，但它可能是別名：

Ext.define('RestaurantGlobal.view.SubCategoryListView',{ 
    extend: 'Ext.List', 
    alias: 'widget.SubCategoryListView', 

，然後你可以使用這個類在這種情況下，創建列表：

xtype: 'SubCategoryListView' 

正如您所料。