ExtJSを使用してユーザー入力のFormPanelにTextAreasを動的に追加

Question

FormPanelはかなり基本的なフォームを表示していますが、基本的に「名前」フィールド、「説明」フィールド、および複数の「ルール」テキストエリアがあります。私が望むのは、ユーザーが最初のそのようなルールテキストエリアにテキストを入力し、別のルールのために（入力を開始すると）別の空のTextFieldを表示できるようにすることです。

現在、指定された名前（newRulesField関数）で呼び出されたときに新しいTextAreasを生成する関数と、テキスト領域内でKeyPressイベントを処理する関数があります。

私が本質的に探しているのは、フォーム内のTextAreasの数を動的に変更する方法です。

は、ここでのコードですが、場合には役立ちます：

function handleRuleKeypress(a,b) { 
    Ext.Msg.alert('kp'); 
} 

function newRulesField(name) { 
    var rulesField = new Ext.form.TextArea({ 
    fieldLabel:  'Rules', 
    anchor:   '100%', 
    name:   name, 
    allowBlank:  false, 
    grow:   false, 
    enableKeyEvents: true, 
    listeners: { 
     keypress: handleRuleKeypress 
    } 
    }); 
    return rulesField; 
} 

function handleNewRuleSetClick(nodes) { 

    var nameField = new Ext.form.TextField({ 
    fieldLabel: 'Name', 
    name:  'ruleSetName', 
    anchor:  '100%', 
    allowBlank: false, 
    grow:  false 
    }); 

    var descField = new Ext.form.TextField({ 
    fieldLabel: 'Description', 
    name:  'ruleSetDescription', 
    anchor:  '100%', 
    allowBlank: false, 
    grow:  false 
    }); 

    var form = new Ext.FormPanel({ 
    labelWidth: 75, 
    defaultType: 'textfield', 
    bodyStyle: 'padding:30px', 
    id:   'newRuleSetPanel', 
    name:  'newRuleSetPanel', 
    title:  'New Rule Set', 
    buttons: [{ 
     text: 'Save', 
     id:  'saveBtn', 
     hidden: false, 
     handler: function() { 
     form.getForm().submit({ 
      url:  'server/new-rule-set', 
      waitMsg: 'Saving...', 
      success: function(f,a) { 
      Ext.Msg.alert('Success', 'It worked'); 
      }, 
      failure: function(f,a) { 
      Ext.Msg.alert('Warning', 'Error'); 
      } 
     }); 
     } 
    },{ 
     text: 'Cancel', 
     id:  'cancelBtn', 
     hidden: false 
    }] 
    }); 

    form.add(nameField); 
    form.add(descField); 
    form.add(newRulesField('rules1')); 

    this.add(form); 
    this.doLayout(); 
} 

Answer 1

あなたはすでにこれを行うには非常に接近している - ちょうどあなたのhandleRuleKeypress機能からあなたnewRulesField関数を呼び出します。このような何か：

function handleNewRuleSetClick(nodes) { 

    var nameField = new Ext.form.TextField({ 
     fieldLabel: 'Name', 
     name: 'ruleSetName', 
     anchor: '100%', 
     allowBlank: false, 
     grow: false 
    }); 

    var descField = new Ext.form.TextField({ 
     fieldLabel: 'Description', 
     name: 'ruleSetDescription', 
     anchor: '100%', 
     allowBlank: false, 
     grow: false 
    }); 

    var form = new Ext.FormPanel({ 
     labelWidth: 75, 
     defaultType: 'textfield', 
     bodyStyle: 'padding:30px', 
     id: 'newRuleSetPanel', 
     name: 'newRuleSetPanel', 
     title: 'New Rule Set', 
     buttons: [{ 
      text: 'Save', 
      id: 'saveBtn', 
      hidden: false, 
      handler: function() { 
       form.getForm().submit({ 
        url: 'server/new-rule-set', 
        waitMsg: 'Saving...', 
        success: function(f, a) { 
         Ext.Msg.alert('Success', 'It worked'); 
        }, 
        failure: function(f, a) { 
         Ext.Msg.alert('Warning', 'Error'); 
        } 
       }); 
      } 
     }, { 
      text: 'Cancel', 
      id: 'cancelBtn', 
      hidden: false 
}] 
     }); 

     function handleRuleKeypress(a, b) { 
      form.add(newRulesField('rules' + Ext.id())); 
     } 

     function newRulesField(name) { 
      var rulesField = new Ext.form.TextArea({ 
       fieldLabel: 'Rules', 
       anchor: '100%', 
       name: name, 
       allowBlank: false, 
       grow: false, 
       enableKeyEvents: true, 
       listeners: { 
        keypress: handleRuleKeypress 
       } 
      }); 
      return rulesField; 
     } 



     form.add(nameField); 
     form.add(descField); 
     form.add(newRulesField('rules1')); 

     this.add(form); 
     this.doLayout(); 
    } 

すでに最新の場合は、おそらく追加のテキスト領域を削除し、新しいテキスト領域を（またはあなたが各キーを押しために新しいものを取得します）追加した場合は、チェックするために追加のロジックをお勧めしますルールが後で空になり、テキストエリアIDを少しきれいに修正します（これはすべてあなたのhandleRuleKeypress関数です）。

私の一般的な考え方は、FormPanelをプライベート関数メンバの代わりにクラスメンバとして保持することです。これにより、作成後に変更するときはいつでもアクセスすることができます。非常にかわいく読める。