Pass child configuration component to parent

Question

I usually do something like this to determine the type of grid:

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

and then I add it to the container or layout through my xtype, 'myGrid'.

What I want to do is define a custom reusable component that either extends Ext.grid.Panel or accepts the same configurations (e.g. columns), but is actually a container containing a grid and other materials.

 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 can be configured as a regular Ext.grid.Panel object, and these configurations should really apply to the grid defined second in the items array.

In other words, something like the following should display a window containing the map layout, where the second map should be a grid, and the columns and storage are 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 configurations provided to the container belong to one of its components, but I do not know how to do this. Any thoughts?

Edit: To be brief, what I'm trying to do is create a component that is configured just like a grid, but actually is a container that contains a grid, as well as some other things. This component will be used several times, so I would like to pack it as a reusable component.

Answer 1

Define property for 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 use:

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

Update

I think now I understand what you are looking for. To register listeners directly on the container, you need to transfer events. I gave an example that at least relays events of the form (which should be the most). You can also pass table events and functions (functions first after rendering). Here's a JSFiddle that prints all events from the container to 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');; } }); 

Answer 2

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