ExtJs4パネル上のすべてのフィールドとすべてのボタンを再帰的に無効にする方法

Question

パネル上でクリック可能な編集可能なコンポーネントをすべて無効にしようとしています。

グレイズアウトしますが、ボタンはクリック可能です。 同じ結果は、各コンポーネントを無効にする機能を持つpanel.cascadeとなります。

これを行う正しい方法は何ですか？

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

これはExt.form.Basicオブジェクトを返します：あなたは、フォームを取得するには、このメソッドを使用することができますFormPanelを使用すると仮定すると

Answer 1

あなたは4.xの ExtJSにを使用している場合は、これはあなたが探しているものである -

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

（あなただけの.componentを使用することができ、フォームの複雑さに基づいて、セレクタ変更し、それ。 Ext.ComponentQuery

あなたは3.xのを使用している場合は、次の2つで同じ効果を得ることができます -

も参照）、フォーム内のすべてのコンポーネントを無効にしますこのような手順 - 手動でフォームパネルにfieldsetのとフィールドを追加する方のため

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

。ここからは、メソッドでこのフォーム上のすべてのフィールドへのアクセス権を持っている：

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

、ExtJSのは、最初の（）をgetFormを行うことで、フォームに直接コンポーネントを追加する必要はありません。これは主に便宜上のものであり、標準機能が適切に動作するようにしています。ですから、あなたが 'add'したコンポーネントは、そのコンポーネントから反復します。

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

Answer 4

これは、フォームのパネル内のすべてのフォームフィールドを無効に優れたソリューションです。

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