Pass up child component's config to parent

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

Override the initComponent method:

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