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

Question

我试图禁用面板上所有可点击、可编辑的组件。

调用 panel.disable() 会将其变灰，但按钮仍然可单击。 同样的结果为 panel.cascade 提供了一个禁用每个组件的函数。

这样做的正确方法是什么？

Answer 1

如果您使用 ExtJs 4.x，这就是您正在寻找的 -

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

（根据表单的复杂性修改您的选择器。您可以只使用 .component ，它将禁用您中的所有组件表单）

另请参阅 - Ext.ComponentQuery

如果您使用 < strong>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

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

祝你好运！

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 获取表单面板的各个部分。外部4

Answer 4

对于那些手动将字段集和字段添加到表单面板的人来说，ExtJS 不需要您通过首先执行 getForm() 来直接将组件添加到表单中。它主要是为了方便，并允许标准功能正常工作。因此，无论您从哪个组件进行“添加”，都从该组件进行迭代。

示例 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);
});