通常，要定义网格类型，我会这样做：
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: [...],
},
});
逻辑上，我只想说提供给容器的配置适用于其中一个组件，但我不知道如何执行它。有什么想法吗？
修改 简而言之，我要做的是创建一个像网格一样配置的组件，但实际上是一个包含网格的容器，以及其他一些东西。这个组件将被多次使用，所以我想把它打包成一个可重用的组件。
答案 0 :(得分：5)
重写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'
}]
});
});
答案 1 :(得分：2)
为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);
}
}
用例：
Ext.create('Ext.window.Window', {
title: 'hi',
layout: 'fit',
items: {
xtype: 'containedGrid',
gridCfg: {
store: myStore,
columns: [...]
}
},
});
<强>更新
我想我现在明白你在寻找什么了。要将侦听器直接注册到容器上，您需要中继事件。我做了一个例子，至少可以传递视图的事件（应该是最多的）。您还可以中继表格的事件和功能（渲染后的功能）。这是一个 JSFiddle ，可以将容器中的所有事件打印到控制台中。
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');;
}
});