ExtJs4 cómo deshabilitar todos los campos y todos los botones de un panel recursivamente

Question

Estoy intentando desactivar todos los componentes editables que se pueden hacer clic en mi panel.

Llamar a panel.disable() lo grises, pero aún se puede hacer clic en los botones. El mismo resultado da panel.cascade con una función que deshabilita cada componente.

¿Cuál es la forma correcta de hacerlo?

Answer 1

Si está utilizando ExtJs 4.x, esto es lo que busca -

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

(? Modifica selector basado en la complejidad de su forma Usted sólo puede usar .Componente y. se desactivan todos los componentes de su forma)

Véase también - Ext.ComponentQuery

Si está utilizando 3.x , se puede lograr el mismo efecto en dos medidas como esta -

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

Suponiendo que utilizó un FormPanel puede utilizar este método para obtener el formulario:

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

Esto devolverá el objeto Ext.form.Basic. Desde aquí se tiene acceso a todos los campos de esta forma con el método:

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

Ahora COU puede recorrer el campo y desactivarlos. Observe también el método applyToFields() donde puede pasar su objeto. Ver información de la API: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-applyToFields

¡Buena suerte!

Answer 3

Para aquellos añadiendo manualmente conjuntos de campos y campos a un panel de formato, ExtJS no requiere que añadir componentes directamente a la forma, al hacer un getForm() en primer lugar. Es principalmente por conveniencia y permite que la funcionalidad estándar funcione correctamente. Entonces, sea cual sea el componente del que hiciste el 'agregar', itera desde ese componente.

Ejemplo 1:

Normalmente no debería utilizar el 'id' para obtener un componente ya está establecido de forma dinámica. Pero esto muestra cómo se puede obtener el panel de formulario usando el getCmp.

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

Cuando la iteración, se podría hacer esto:

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

Ejemplo 2:

En este ejemplo, se añade a la forma en sí, por lo que la iteración se ve un poco diferente.

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

Cuando la iteración, se podría hacer esto:

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

Answer 4

Esta es una mejor solución para deshabilitar todos los campos del formulario dentro de un panel de formato.

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

Simplemente haga una referencia a los campos del panel de formulario. Itere sobre cada campo y use la función setDisabled para establecer su atributo readOnly en verdadero.

También puede llevarlo un conjunto más y tomar todo el panel de formulario. Esta solución anterior solo captura secciones individuales del panel de formulario por su ID. extjs 4