ExtJs4 jak wyłączyć wszystkie pola i wszystkie przyciski na panelu rekurencyjnie

Question

Próbuję wyłączyć wszystkie klikalne, edytowalne komponenty na moim panelu.

Dzwonienie pod numer panel.disable() powoduje szarszenie, ale przyciski są nadal klikalne. Ten sam wynik daje panel.cascade z funkcją, która wyłącza każdy składnik.

Co to jest właściwy sposób?

Answer 1

Jeśli używasz ExtJS 4.x, to jest to, czego szukasz -

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

(zmodyfikować selektor na podstawie złożoności formularzu można po prostu użyć .component i to. spowoduje wyłączenie wszystkich składników w formularzu)

Patrz też - Ext.ComponentQuery

Jeśli używasz 3.x, można osiągnąć ten sam efekt w dwóch kroki, takie jak ten -

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

Zakładając, że stosuje się FormPanel można użyć tej metody, aby uzyskać postać:

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

ta zwróci obiekt Ext.form.Basic. Stąd masz dostęp do wszystkich pól w tym formularzu za pomocą metody:

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

Teraz cou może iterować przez pole i je wyłączać. Zwróć także uwagę na metodę, w której możesz przekazać swój obiekt. Zobacz informacje o interfejsie API: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-applyToFields

Powodzenia!

Answer 3

Dla tych, ręcznie dodając fieldsets i pola do panelu formy, ExtJS nie wymaga, aby dodać składniki bezpośrednio do formy, wykonując getForm() pierwsza. Jest to głównie dla wygody i pozwala na prawidłowe działanie standardowej funkcjonalności. Więc niezależnie od tego, z jakiego komponentu zrobiłeś "dodaj", iteruj z tego komponentu.

Przykład 1:

Normalnie nie powinno się używać „identyfikator”, aby komponent ponieważ jest on ustawiony dynamicznie. Ale to pokazuje, jak można uzyskać sam panel formularza za pomocą getCmp.

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

podczas iteracji, by to zrobić:

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

Przykład 2:

W tym przykładzie dodamy do samej rzeczywistej postaci, więc iteracja wygląda nieco różne.

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

podczas iteracji, by to zrobić:

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

Answer 4

Jest to lepsze rozwiązanie, aby wyłączyć wszystkie pola formularza wewnątrz panelu formularza.

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

Wystarczy uzyskać odwołanie do pól panelu formularza. Iteruj po każdym polu i użyj funkcji setDisabled, aby ustawić jego atrybut readOnly na true.

Możesz również wziąć zestaw jeszcze dalej i pobrać cały panel formularza. To rozwiązanie powyżej chwyta tylko poszczególne sekcje panelu formularza za jego identyfikator. extjs 4