在构造时防止组件的渲染(隐藏和/或禁用)
背景:我们的应用程序总是作为一个整体打包,但通过用户访问一些服务器端操作可能会受到限制.我们知道应用程序启动时允许的操作.我们现在想要隐藏他无法访问的用户的所有视图(面板,按钮等).
为此,我们编写了一个可以应用于任何组件的插件.但问题出现了:
以下是我们尝试针对插件主机运行的内容:
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:true和disabled: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的评论
在一个Testcase中,我们使用列布局,其中所有容器都从同一个类扩展.一旦我将我们的插件(将beforerender事件返回false配置)添加到其中一个扩展容器(插件直接添加到类定义(作为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',{extend:'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.
});