Question

我正在尝试禁用面板上所有可点击的可编辑组件。

调用panel.disable()使其变灰，但按钮仍然可以点击。同样的结果为panel.cascade提供了一个禁用每个组件的功能。

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

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

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

现在，cou可以遍历该字段并禁用它们。另请注意方法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来抓取表单面板的各个部分。 extjs 4

Answer 4

对于那些手动将字段集和字段添加到表单面板的人，ExtJS并不要求您首先通过执行getForm（）直接向表单添加组件。它主要是为了方便，并允许标准功能正常工作。所以无论你做了什么组件，都要添加＆＃39;来自，从该组件迭代。

示例1：

通常你不应该使用＆＃39; id＆＃39;获取组件，因为它是动态设置的。但这显示了如何使用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);
});

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

4 个答案: