ExtJs4如何递归禁用面板上的所有字段和按钮

Question

我想要禁用面板上所有可以点击和编辑的组件。

调用 panel.disable() 会使其变灰，但是按钮仍然可以点击。使用 panel.cascade 并提供一个禁用每个组件的函数会得到相同的结果。

应该怎样才能正确地实现这个需求呢？

- Andrey Selitsky

Answer 1

如果你正在使用ExtJs 4.x，那么这就是你所需要的 -

myFormPanel.query('.field, .button').forEach(function(c){c.setDisabled(false);});

根据表单的复杂度修改您的选择器。您可以仅使用`.component`，它将禁用您表单中的所有组件。 另请参阅-Ext.ComponentQuery 如果您使用的是3.x版本，则可以通过以下两个步骤实现相同的效果 -

myFormPanel.buttons.forEach(function(btn){btn.setDisabled(true);}); //disable all buttons
myFormPanel.getForm().items.each(function(itm){itm.setDisabled(true)}); //disable all fields

- Amol Katdare

---

根据文档（http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-method-setDisabled），应该是 c.setDisabled(true)，当然我是指 Extjs 4.2.1。 - ss_everywhere

Answer 2

假设您使用了一个 FormPanel ，您可以使用此方法获取表单：

getForm() // see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-method-getForm

这将返回Ext.form.Basic对象。从这里开始，您可以使用该方法访问此表单上的所有字段：

getFields() // see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-getFields

现在，您可以遍历该字段并将其禁用。请注意方法applyToFields()，您可以将您的对象传递给它。详见API信息：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-applyToFields。

祝你好运！

- adis

Answer 3

这是禁用表单面板内所有表单字段的更好解决方案。

var formPanelName = Ext.ComponentQuery.query('#formPanelId field');
for(var i= 0; i < formPanelName.length; i++) {
   formPanelName[i].setDisabled(true);
}

只需获取表单面板字段的引用。遍历每个字段，并使用setDisabled函数将其readOnly属性设置为true。

您还可以进一步采取一组操作，即获取整个表单面板。上述解决方案仅通过其ID获取表单面板的各个部分。extjs 4

- tjacks3

Answer 4

对于手动向表单面板添加字段集和字段的人来说，ExtJS不要求您首先使用getForm()直接向表单添加组件。这主要是为了方便，并允许标准功能正常工作。因此，从您添加“add”所在的任何组件开始迭代。

示例1：

通常情况下，您不应使用“id”获取组件，因为它会动态设置。但这说明了您可以使用getCmp获取表单面板本身。

            var formPanel = Ext.getCmp('id-of-component');
            var fieldSet = Ext.create('Ext.form.FieldSet', {
                title: 'field set'                    
            });
            formPanel.add(fieldSet);

当进行迭代时，您会这样做：

formPanel.each(function(item) {
  alert(item.title);
});

示例2：

在这个示例中，我们将添加到实际表单本身，因此迭代看起来略有不同。

            var formPanel = Ext.getCmp('id-of-component');
            var fieldSet = Ext.create('Ext.form.FieldSet', {
                title: 'field set'                    
            });
            formPanel.getForm().add(fieldSet);

当进行迭代时，您会这样做：

formPanel.getForm().each(function(item) {
  alert(item.title);
});

- Entree