将子组件的配置传递给父组件

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 对象一样配置，并且这些配置应该真正应用于 items 数组中第二个定义的网格。

换句话说，类似下面的内容应该呈现一个包含卡片布局的窗口，其中第二张卡片应该是网格，并为容器提供列和存储。

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

从逻辑上讲，我只想说提供给容器的配置适用于其组件之一，但我不知道如何执行。有什么想法吗？

编辑： 简而言之，我要做的是创建一个组件，该组件的配置就像网格一样，但实际上是一个包含网格以及其他一些东西的容器。这个组件会被多次使用，所以我想把它打包成一个可复用的组件。

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'
        }]
    });
});