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

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

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