javascript Extjs 将表单上的所有字段设置为只读
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12895606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs set read only for all fields on form on the fly
提问by vedmed
I am try to write method which set readOnly property for all fields on the form.
我正在尝试编写为表单上的所有字段设置只读属性的方法。
My code:
我的代码：
Ext.override(Ext.form.Panel,{
setReadOnlyForAll: function(bReadOnly) {
this.cascade(function(f) {
if (f.isFormField) {
f.setReadOnly(bReadOnly);
}
});
});
Invoke this method from Ext.form.Panel:
从 Ext.form.Panel 调用此方法：
this.setReadOnlyForAll(false);
But this method work so slowly.Have somebody an idea how to increase speed? Thank you!
但是这种方法工作很慢。有人知道如何提高速度吗？谢谢！
回答by Wilk
cascadechecks every child of the current container (such as an Ext.form.Panel) and this means you've to check if the current child is a form field or not.
So, use Ext.form.Basic.getFieldsmethod to get every form fields:
cascade检查当前容器的每个子项（例如Ext.form.Panel），这意味着您必须检查当前子项是否为表单字段。因此，使用Ext.form.Basic.getFields方法获取每个表单字段：
Ext.define ('Your_form_Panel', {
extend: 'Ext.form.Panel' ,
setReadOnlyForAll: function (bReadOnly) {
this.getForm().getFields().each (function (field) {
field.setReadOnly (bReadOnly);
});
}
});
Further more, I suggest you to use Ext.defineinstead of Ext.override.
此外，我建议您使用Ext.define而不是Ext.override.
回答by JamieB
I was still experiencing a 9 second delay to set ~90 fields as readOnly on a form (with nested forms) with Wilk's suggestion (using ExtJS 4.1.1a).
根据 Wilk 的建议（使用 ExtJS 4.1.1a），我仍然遇到了 9 秒的延迟，无法在表单（带有嵌套表单）上将 ~90 个字段设置为只读。
To improve this further and reduce from 9 seconds to < 1 second I added calls to Ext.suspendLayouts() and Ext.resumeLayouts() globals to allow the framework to batch the component layouts.
为了进一步改进并将时间从 9 秒减少到 < 1 秒，我添加了对 Ext.suspendLayouts() 和 Ext.resumeLayouts() 全局变量的调用，以允许框架对组件布局进行批处理。
Ext.define('My.Panel', {
extend: 'Ext.form.Panel',
setReadOnlyForAll: function(readOnly) {
Ext.suspendLayouts();
this.getForm().getFields().each(function(field) {
field.setReadOnly(readOnly);
});
Ext.resumeLayouts();
}
});
回答by Luca Lobefaro
It's simple. Just add this configuration in your Form:
这很简单。只需在您的表单中添加此配置：
var formPanel = Ext.create('Ext.form.Panel', {
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side',
readOnly : true //all fiels are in readOnly mode
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Nome',
name: 'nome'
}, {
fieldLabel: 'Cognome',
name: 'cognome'
}
]
}],
});
