ExtJs4 Come disattivare tutti i campi e tutti i pulsanti su un pannello in modo ricorsivo

Question

sto cercando di disattivare tutti i componenti, modificabili cliccabili sul mio pannello.

Calling panel.disable() grigi fuori, ma i tasti sono ancora cliccabile. Lo stesso risultato dà panel.cascade con una funzione che disattiva ogni componente.

Qual è il modo giusto per farlo?

Answer 1

Se si utilizza ExtJs 4.x, questo è quello che state cercando -

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

(modificare il vostro selettore in base alla complessità del modulo Si può semplicemente utilizzare .component ed. consente di disattivare tutti i componenti nel modulo)

Vedi anche - Ext.ComponentQuery

Se si utilizza 3.x, è possibile ottenere lo stesso effetto in due passi come questo -

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

Partendo dal presupposto che è stato utilizzato un FormPanel è possibile utilizzare questo metodo per ottenere forma:

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

Ciò restituirà l'oggetto Ext.form.Basic. Da qui si ha accesso a tutti i campi in questo modulo con il metodo:

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

Ora cou può scorrere il campo e disattivarli. Si noti anche il metodo applyToFields() dove si può passare il vostro oggetto. Vedere le informazioni API: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-applyToFields

Buona fortuna!

Answer 3

Per coloro aggiungere manualmente fieldsets e campi per un pannello formato, ExtJS non richiede di aggiungere componenti direttamente al modulo, facendo un GetForm() prima. È principalmente per comodità e consente alle funzionalità standard di funzionare correttamente. Quindi qualunque componente tu abbia fatto "aggiungere", itera da quel componente.

Esempio 1:

Normalmente non dovrebbe utilizzare il 'id' per ottenere un componente dal momento che è impostato in modo dinamico. Ma questo dimostra come si potrebbe ottenere il pannello forma stessa utilizzando il getCmp.

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

Quando l'iterazione, si dovrebbe fare questo:

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

Esempio 2:

In questo esempio, si aggiunge alla forma vera e propria, così l'iterazione sembra un po ' diverso.

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

Quando iterazione, si esegue questa operazione:

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

Answer 4

Si tratta di una soluzione migliore per disabilitando tutti i campi modulo all'interno di un pannello formato.

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

Basta ottenere un riferimento ai campi del pannello del modulo. Eseguire l'iterazione su ciascun campo e utilizzare la funzione setDisabled per impostare l'attributo readOnly su true.

È inoltre possibile prendere un set ulteriormente e afferrare l'intero modulo Pannello. Questa soluzione in alto prende solo le singole sezioni del pannello del modulo dal suo ID. ExtJS 4