Динамически добавлять TextAreas в FormPanel при вводе данных пользователем с помощью ExtJS

Question

У меня есть FormPanel, отображающая довольно простую форму, по сути, она просто содержит поле «Имя», поле «Описание» и несколько текстовых областей «Правила». Я хочу, чтобы пользователь мог вводить текст в первую такую ​​текстовую область правила и иметь еще один пустой TextField (когда они начинают печатать) для дополнительного правила.

В настоящее время у меня есть функция, которая должна генерировать новые TextAreas при вызове с указанным именем (функция newRulesField), и функция для обработки событий 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

Вы уже очень близки к этому - просто вызовите функцию newRulesField из функции handleRuleKeypress . как то так:

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

вам понадобится дополнительная логика для проверки, если вы уже добавили новую текстовую область (или вы будете получать новую для каждого нажатия клавиши), возможно, удаление дополнительной текстовой области, если позднее будет освобождено последнее правило, и исправление идентификатор текстовой области немного красивее (все это ваша handleRuleKeypress функция).

Мои общие мысли о дизайне вашего приложения состоят в том, чтобы держать FormPanel как член класса где-то, а не как член закрытой функции, это облегчит доступ к нему, когда дело доходит до его модификации после создания, - такие функции стека не очень красивый и не читаемый.