背景：我们的应用程序总是打包成一个整体，但通过用户访问，一些服务器端操作可能会受到限制。我们知道应用程序启动时允许哪些操作。我们现在想要隐藏用户无法访问的所有视图（面板、按钮等）。
为此，我们编写了一个可以应用于任何组件的插件。但是问题来了：
这是我们尝试针对插件主机运行的内容：
if (cmp['setVisible']) cmp.setVisible(false); else cmp.hidden = true;
if (cmp['disable']) cmp.disable(); else cmp.disabled = true;
cmp.on('beforerender', function() { return false; })
首先，我们认为越早这样做越好。所以我们尝试在插件构建时运行它。但这是不可能的，因为（主机的）侦听器似乎还没有准备好（组件试图触发隐藏事件）。所以我们把它移到init插件的方法中，它不会抛出错误，但只是部分工作。只有beforerender事件真正得到应用，但它只是中止了子项的渲染。所以我们最终得到了一个看起来破碎的组件（边框在那里，内容没有）。如果我们评论了活动注册，主持人保持不变。我们还测试了仅使用hidden:trueanddisabled:true没有运气。
那么我们如何才能防止以正确的方式渲染组件呢？
编辑：
该组件应标记为禁用和隐藏，因为我们无法阻止该组件的创建。我从同事那里得到的剪辑是错误的，所以setVisible(false)我们也猜到了disable()。但是该组件被静止渲染，并且我们似乎无法在不以半渲染组件结束的情况下否决这一点。
@AlexTokarev 的回答
我尝试了@AlexTokarev 的建议。为此，我在 Plugin-Constructor 中添加了以下几行
cmp.hidden = true;
cmp.autoShow = false; // I know this may do nothing for non floating but I added it anyway
cmp.autoRender = true;
基于调试，我知道设置很早就被应用了（在Ext.AbstractComponent.constructor 处），但我最终还是得到了一个隐藏和渲染的组件。
@sbgoran 发表评论
在一个测试用例中，我们使用列布局，其中所有容器都从同一个类扩展。一旦我将我们的插件（使用 beforerender 事件返回错误配置）添加到此扩展容器之一（插件直接添加到类定义（作为 ptype）），此列中的所有容器看起来都已损坏（仅呈现边框并在内容是左上角的一个小灰色框。）。因此，当只有一个子项取消渲染时，中止的渲染会影响列的所有子项。
**示例代码**
首先我想指出，我们正在寻找一种方法来实现这一点，因为我们知道在 ExtJS 中的渲染是一回事。我可以要求设置一个演示，但我认为这不会那么容易，因为我们正在使用Ext.app.portal.Panel失败的示例。但该插件应该适用于任何类型的组件。首先，我将添加一些演示代码：
我们有一个视图，它被放置在一个带有边框布局的 Viwport 中
Ext.define('MVC.view.Application',{
extend:'Ext.tab.Panel',
alias:'widget.appview',
region: 'center',
activeTab: 1
});
在控制器中，我们填充这个
var portal = this.portalRef = Ext.widget('portalpanel', {
title: 'Employee',
portalCols: 2
});
portal.addPortlet(0,['employee','employee2','employee3']);
portal.addPortlet(1,['employee4','employee5']);
app.appviewmain.add(portal);
这是门户面板
Ext.define('MVC.app.portal.PortalPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.portalpanel',
requires: [
'Ext.layout.container.Column',
'Ext.app.portal.PortalDropZone',
'Ext.app.portal.PortalColumn'
],
portalCols: 2,
portalColCfg: {
defaults: {
closable: false,
draggable: false,
collapsible: false,
header: false,
bodyStyle: {
background: '#fff',
padding: '10px'
}
},
items: []
},
addPortlet: function(idx, portlets) {
if (idx > this.portalCols || idx < 0)
return;
var portalCol = this.items.getAt(idx);
function insertPortlet(portlet) {
if (Ext.isString(portlet)) {
portlet = { xtype: portlet };
}
portalCol.add(portlet);
};
if (Ext.isArray(portlets)) {
var len = portlets.length,
i = 0;
for(;i<len;i++) {
insertPortlet(portlets[i]);
}
} else {
insertPortlet(portlets);
}
},
initPortal: function() {
var cfg = this.portalColCfg,
i = 0,
cols = [];
for (;i<this.portalCols;i++) {
cols.push(Ext.clone(cfg));
}
this.items = cols;
},
cls: 'x-portal',
bodyCls: 'x-portal-body',
defaultType: 'portalcolumn',
autoScroll: true,
manageHeight: false,
initComponent : function() {
var me = this;
// init only if nothing is defined
if (!me.items)
me.initPortal();
// Implement a Container beforeLayout call from the layout to this Container
me.layout = {
type : 'column'
};
me.callParent();
me.addEvents({
validatedrop: true,
beforedragover: true,
dragover: true,
beforedrop: true,
drop: true
});
},
// Set columnWidth, and set first and last column classes to allow exact CSS targeting.
beforeLayout: function() {
var items = this.layout.getLayoutItems(),
len = items.length,
firstAndLast = ['x-portal-column-first', 'x-portal-column-last'],
i, item, last;
for (i = 0; i < len; i++) {
item = items[i];
item.columnWidth = 1 / len;
last = (i == len-1);
if (!i) { // if (first)
if (last) {
item.addCls(firstAndLast);
} else {
item.addCls('x-portal-column-first');
item.removeCls('x-portal-column-last');
}
} else if (last) {
item.addCls('x-portal-column-last');
item.removeCls('x-portal-column-first');
} else {
item.removeCls(firstAndLast);
}
}
return this.callParent(arguments);
},
// private
initEvents : function(){
this.callParent();
this.dd = Ext.create('Ext.app.portal.PortalDropZone', this, this.dropConfig);
},
// private
beforeDestroy : function() {
if (this.dd) {
this.dd.unreg();
}
this.callParent();
}
});
这是 Portlet
Ext.define('Ext.app.portal.Portlet', {
extend: 'Ext.panel.Panel',
alias: 'widget.portlet',
layout: 'fit',
anchor: '100%',
frame: true,
closable: true,
collapsible: true,
animCollapse: true,
draggable: {
moveOnDrag: false
},
cls: 'x-portlet',
initComponent : function() {
this.callParent();
},
// Override Panel's default doClose to provide a custom fade out effect
// when a portlet is removed from the portal
doClose: function() {
if (!this.closing) {
this.closing = true;
this.el.animate({
opacity: 0,
callback: function(){
var closeAction = this.closeAction;
this.closing = false;
this.fireEvent('close', this);
this[closeAction]();
if (closeAction == 'hide') {
this.el.setOpacity(1);
}
},
scope: this
});
}
}
});
这是一个示例视图
Ext.define('MVC.view.employee.Employee',{
extend:'Ext.app.portal.Portlet',
alias:'widget.employee',
plugins: [{ptype: 'directbound', accessRoute: 'Employee.Read'}],
items: [
/*A form with some fields*/
]
});
这是插件
Ext.define('MVC.direct.plugins.DirectBound',{
extend: 'Ext.AbstractPlugin',
alternateClassName: ['MVC.direct.DirectBound'],
alias: 'plugin.directbound',
/**
* @cfg {int} blockMode Indicates the way in which the Component gets blocked
* options
* 0 hide and disable
* 1 disable
*/
blockMode: 1,
constructor: function(config) {
var me = this,
cmp = config['cmp'],
route;
me.parseRoute(route);
// check for access
if (!me.checkAccess()) {
if (me.blockMode === 0) {
cmp.hidden = true;
cmp.autoShow = false;
cmp.autoRender = true;
}
me.diabled = true;
}
me.callParent(arguments);
}
/* some more methods */
});
这是列布局
Ext.define('MVC.app.portal.PortalColumn', { 扩展: 'Ext.container.Container', 别名: 'widget.portalcolumn',
requires: [
'Ext.layout.container.Anchor',
'MVC.app.portal.Portlet'
],
layout: 'anchor',
defaultType: 'portlet',
cls: 'x-portal-column'
// This is a class so that it could be easily extended
// if necessary to provide additional behavior.
});