Question

Normally, to define a grid type, I do something like this:

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

and then I add it to a container or layout via its xtype, ‘myGrid’.

What I want to do is define a reusable custom component that either extends Ext.grid.Panel or accepts the same configs (such as columns), but is really a container that contains a grid and other stuff.

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
  ],
}

Ideally, this component could be configured like a regular Ext.grid.Panel object, and those configurations should be really apply to the grid defined second in the items array.

In other words, something like the following should render a window containing a card layout, where the second card should be the grid, with the columns & store provided to the container.

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

Logically, I just want to say that the configs provided to the container apply to one of its components, but I don’t know how to execute that. Any thoughts?

Edit:
To be succinct, what I’m trying to do is create a component that is configured just like a grid, but is really a container that includes a grid, along with some other stuff. This component will be used several times, so I’d like to package it as a reusable component.

Answer 1

Define a property for the 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);
  }
}

And the usecase:

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

Update

I think I now understand what you are looking for. To register listeners directly onto the container you need to relay the events. I’ve made a example that at least relay the events of the view (which should be most). You will be able to relay also events of the table and the features (features first after rendering). Here’s a JSFiddle that print all events from the container into the console.

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

});