放過子組件的配置於母公司

Question

通常情況下，定義網格類型，我做這樣的事情：

Ext.define('MyApp.view.MyGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.myGrid', 
    store: 'MyStore', 
    columns: [...], 
} 

，然後我通過它的xtype，「myGrid」將它添加到一個容器或佈局。

我想要做的是定義一個可重複使用的自定義組件，它可以擴展Ext.grid.Panel或接受相同的配置（如列），但實際上是一個包含網格和其他內容的容器。

Ext.define('MyApp.components.ContainedGrid', { 
    extend: 'Ext.container.Container' //or Ext.grid.Panel, whatever works 
    alias: 'widget.containedGrid', 
    layout: 'card', 
    items: [ 
    {someObject}, //doesn't matter what this is 
    {aGrid}, //the grid that should receive the configs from the caller 
    ], 
} 

在理想情況下，該組件可被配置像常規Ext.grid.Panel對象，並且這些配置應真正適用於項目陣列中的第二所定義的網格。

換句話說，像下面這樣的東西應該呈現一個包含卡片佈局的窗口，其中第二張卡片應該是網格，並且提供給容器的列存儲在&。

Ext.create('Ext.window.Window', { 
    title: 'hi', 
    layout: 'fit', 
    items: { 
    xtype: 'containedGrid', 
    store: myStore, 
    columns: [...], 
    }, 
}); 

從邏輯上講，我只想說，提供給容器CONFIGS適用於它的組件之一，但我不知道如何來執行。有什麼想法嗎？

編輯： 要簡潔，我想要做的就是創建一個配置就像一個網格中的成分，但確實是包括電網，與一些其他的東西沿着容器。這個組件將被多次使用，所以我想將它打包爲可重用組件。

Answer 1

定義屬性爲gridconfig

Ext.define('MyApp.components.ContainedGrid', { 
    extend: 'Ext.container.Container' //or Ext.grid.Panel, whatever works 
    alias: 'widget.containedGrid', 
    layout: 'card', 
    /** 
    * @cfg {object} gridCfg 
    */ 

    initComponent: function(){ 
    var gridCfg = { xtype: 'grid' }; 
    if(this.gridCfg) 
      gridCfg = Ext.apply(gridCfg ,this.gridCfg); 
    if (this.items) // we assume if set it will be always array! 
      this.items.push(gridCfg); 
    else 
      this.items = [gridCfg]; 
    delete this.gridCfg; // we no longer need this property here 
    this.callParent(arguments); 
    } 
} 

而且用例：

Ext.create('Ext.window.Window', { 
    title: 'hi', 
    layout: 'fit', 
    items: { 
    xtype: 'containedGrid', 
    gridCfg: { 
     store: myStore, 
     columns: [...] 
    } 
    }, 
}); 

更新

我想我現在明白你在找什麼。要將聽衆直接註冊到容器上，您需要中繼事件。我舉了一個例子，至少傳達了觀點的事件（應該是最多的）。您還可以轉發表格和特徵的事件（特徵首先在渲染後）。這是一個JSFiddle，它將容器中的所有事件打印到控制檯中。

Ext.define('Ext.ux.ContainedGrid', { 
     extend: 'Ext.container.Container', 
     alias: 'widget.containedGrid', 
     layout: 'card', 
     /** 
     * @cfg {object} gridCfg 
     */ 

     /** 
     * @private {object} grid 
     */ 
     initComponent: function(){ 
     var me = this, 
      grid; 
     // provide some default settings for the grid here, 
     // which can be overriden by each instance 
     var gridCfg = { }; // the defaulttype is defined on the componentmanager call 
     me.gridCfg = me.gridCfg ? Ext.apply(gridCfg ,me.gridCfg) : gridCfg; 

     me.grid = me.getGrid(); 

     if (me.items && Ext.isArray(me.items)) 
       me.items.push(me.grid); 
     else if(me.items) 
       me.items = [me.items, me.grid]; 
     else 
       me.items = [me.grid]; 
     delete me.gridCfg; // we no longer need this property here 
     // Relay events from the View whether it be a LockingView, or a regular GridView 
     this.relayEvents(me.grid, [ 
       /** 
       * @event beforeitemmousedown 
       * @inheritdoc Ext.view.View#beforeitemmousedown 
       */ 
       'beforeitemmousedown', 
       /** 
       * @event beforeitemmouseup 
       * @inheritdoc Ext.view.View#beforeitemmouseup 
       */ 
       'beforeitemmouseup', 
       /** 
       * @event beforeitemmouseenter 
       * @inheritdoc Ext.view.View#beforeitemmouseenter 
       */ 
       'beforeitemmouseenter', 
       /** 
       * @event beforeitemmouseleave 
       * @inheritdoc Ext.view.View#beforeitemmouseleave 
       */ 
       'beforeitemmouseleave', 
       /** 
       * @event beforeitemclick 
       * @inheritdoc Ext.view.View#beforeitemclick 
       */ 
       'beforeitemclick', 
       /** 
       * @event beforeitemdblclick 
       * @inheritdoc Ext.view.View#beforeitemdblclick 
       */ 
       'beforeitemdblclick', 
       /** 
       * @event beforeitemcontextmenu 
       * @inheritdoc Ext.view.View#beforeitemcontextmenu 
       */ 
       'beforeitemcontextmenu', 
       /** 
       * @event itemmousedown 
       * @inheritdoc Ext.view.View#itemmousedown 
       */ 
       'itemmousedown', 
       /** 
       * @event itemmouseup 
       * @inheritdoc Ext.view.View#itemmouseup 
       */ 
       'itemmouseup', 
       /** 
       * @event itemmouseenter 
       * @inheritdoc Ext.view.View#itemmouseenter 
       */ 
       'itemmouseenter', 
       /** 
       * @event itemmouseleave 
       * @inheritdoc Ext.view.View#itemmouseleave 
       */ 
       'itemmouseleave', 
       /** 
       * @event itemclick 
       * @inheritdoc Ext.view.View#itemclick 
       */ 
       'itemclick', 
       /** 
       * @event itemdblclick 
       * @inheritdoc Ext.view.View#itemdblclick 
       */ 
       'itemdblclick', 
       /** 
       * @event itemcontextmenu 
       * @inheritdoc Ext.view.View#itemcontextmenu 
       */ 
       'itemcontextmenu', 
       /** 
       * @event beforecontainermousedown 
       * @inheritdoc Ext.view.View#beforecontainermousedown 
       */ 
       'beforecontainermousedown', 
       /** 
       * @event beforecontainermouseup 
       * @inheritdoc Ext.view.View#beforecontainermouseup 
       */ 
       'beforecontainermouseup', 
       /** 
       * @event beforecontainermouseover 
       * @inheritdoc Ext.view.View#beforecontainermouseover 
       */ 
       'beforecontainermouseover', 
       /** 
       * @event beforecontainermouseout 
       * @inheritdoc Ext.view.View#beforecontainermouseout 
       */ 
       'beforecontainermouseout', 
       /** 
       * @event beforecontainerclick 
       * @inheritdoc Ext.view.View#beforecontainerclick 
       */ 
       'beforecontainerclick', 
       /** 
       * @event beforecontainerdblclick 
       * @inheritdoc Ext.view.View#beforecontainerdblclick 
       */ 
       'beforecontainerdblclick', 
       /** 
       * @event beforecontainercontextmenu 
       * @inheritdoc Ext.view.View#beforecontainercontextmenu 
       */ 
       'beforecontainercontextmenu', 
       /** 
       * @event containermouseup 
       * @inheritdoc Ext.view.View#containermouseup 
       */ 
       'containermouseup', 
       /** 
       * @event containermouseover 
       * @inheritdoc Ext.view.View#containermouseover 
       */ 
       'containermouseover', 
       /** 
       * @event containermouseout 
       * @inheritdoc Ext.view.View#containermouseout 
       */ 
       'containermouseout', 
       /** 
       * @event containerclick 
       * @inheritdoc Ext.view.View#containerclick 
       */ 
       'containerclick', 
       /** 
       * @event containerdblclick 
       * @inheritdoc Ext.view.View#containerdblclick 
       */ 
       'containerdblclick', 
       /** 
       * @event containercontextmenu 
       * @inheritdoc Ext.view.View#containercontextmenu 
       */ 
       'containercontextmenu', 
       /** 
       * @event selectionchange 
       * @inheritdoc Ext.selection.Model#selectionchange 
       */ 
       'selectionchange', 
       /** 
       * @event beforeselect 
       * @inheritdoc Ext.selection.RowModel#beforeselect 
       */ 
       'beforeselect', 
       /** 
       * @event select 
       * @inheritdoc Ext.selection.RowModel#select 
       */ 
       'select', 
       /** 
       * @event beforedeselect 
       * @inheritdoc Ext.selection.RowModel#beforedeselect 
       */ 
       'beforedeselect', 
       /** 
       * @event deselect 
       * @inheritdoc Ext.selection.RowModel#deselect 
       */ 
       'deselect' 
      ]); 
     me.callParent(arguments); 
     }, 
     getGrid: function() { 
     if(this.grid) 
      return this.grid; 
     return this.grid = Ext.ComponentManager.create(this.gridCfg,'grid');; 
     } 

}); 

Answer 2

覆蓋的initComponent方法：

Ext.define('MyWindow', { 
    extend: 'Ext.window.Window', 
    layout: 'fit', 
    title: 'Foo', 

    initComponent: function(){ 
     this.items = { 
      xtype: 'grid', 
      store: this.store, 
      columns: this.columns  
     }; 
     this.callParent(); 
    } 
}); 

Ext.onReady(function(){ 
    new MyWindow({ 
     width: 200, 
     height: 200, 
     autoShow: true, 
     store: { 
      fields: ['name'], 
      data: [{ 
       name: 'Name 1' 
      }] 
     }, 
     columns: [{ 
      dataIndex: 'name', 
      text: 'Name' 
     }] 
    }); 
});