title: In ExtJS components how to forward config: {} items to sub components
body: <p>I am trying to write a reusable item selection panel where the user has a grid with items he can choose from and a small text field that he can use to filter the content of the grid. Right now the (simplified) view code looks like this and <strong>works</strong>.</p>
  
  <pre><code>Ext.define('MyApp.view.items.ItemSelectorPanel', {
      extend: 'Ext.panel.Panel',
      require: 'MyApp.view.items.SimpleItemGrid',
      alias: 'widget.ItemSelectorPanel',
      layout: 'form',
  
      config: {
          itemStore: false
      },
  
      constructor: function(config) {
          this.initConfig(config);
  
          this.superclass.constructor.call(this, config);
  
          this.add([
              {
                  fieldLabel: 'Filter',
                  name: 'filter'
              },
              {
                  xtype: 'SimpleItemGrid',
                  collapsible: true,
                  store: this.getItemStore()
              }
          ]);
  
          return this;
      }
  });
  </code></pre>
  
  <p>As you can see the <code>ItemSelectorPanel</code> uses the <code>config</code> property to expose an interface where the calling site can specify which item store to use.</p>
  
  <p>Calling site (in this case the panel is added to a TabPanel):</p>
  
  <pre><code>var panelToAdd = {
      xtype: 'panel',
      title: 'New Selection',
      closable: true,
      padding: 10,
      items: [{
          title: 'Select node',
          xtype: 'ItemSelectorPanel',
          itemStore: itemStore
      }]
  };
  </code></pre>
  
  <p>Now, I love the declarative style of ExtJS 4 and how it helps to follow the MVC pattern. I would prefer to have the least amount of code possible in the views. Unfortunately this <strong>does not work</strong>:</p>
  
  <pre><code>Ext.define('MyApp.view.items.ItemSelectorPanel', {
      /* ... same as above ... */
  
      constructor: function(config) {
          this.initConfig(config);
  
          this.superclass.constructor.call(this, config);
  
          return this;
      },
  
      items: [
              {
                  fieldLabel: 'Filter',
                  name: 'filter'
              },
              {
                  xtype: 'SimpleItemGrid',
                  collapsible: true,
                  store: this.getItemStore   // &lt;-- interesting part
              }
      ]
  });
  </code></pre>
  
  <p>Is there a way to expose the config of a nested/sub component via the <code>config</code> property of the parent property <strong>in a declarative manner</strong>?</p>