将子组件的配置传递给父组件 [英] Pass up child component's config to parent
问题描述
通常，要定义网格类型，我会执行以下操作:
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: [...],
}
，然后通过其xtype'myGrid'将其添加到容器或布局中.
and then I add it to a container or layout via its xtype, 'myGrid'.
我想做的是定义一个可重用的自定义组件，该组件可以扩展Ext.grid.Panel或接受相同的配置(例如列)，但实际上是一个包含网格和其他内容的容器.
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
],
}
理想情况下，可以像配置常规Ext.grid.Panel对象一样配置此组件，并且这些配置应确实适用于items数组中第二个定义的网格.
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?
修改: 简而言之，我要做的是创建一个组件，该组件的配置就像网格一样，但实际上是一个包含网格以及其他内容的容器.该组件将被多次使用，因此我希望将其打包为可重用的组件.
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.
推荐答案
为gridconfig定义属性
Define a property for the 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 ，可将容器中的所有事件打印到控制台中
I think I now understand what you are looking for. To register listeners directly onto the container you need to relay the events. I've made a example that at least relay the events of the view (which should be most). You will be able to relay also events of the table and the features (features first after rendering). Here's a JSFiddle that print all events from the container into 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');;
}
});
这篇关于将子组件的配置传递给父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
