Javascript 使用ExtJS在用户输入时向FormPanel动态添加TextAreas

我有一个FormPanel，它显示了一个非常基本的表单，本质上，它只包含一个“Name”字段、一个“Description”字段和多个“Rules”文本区域。我希望用户能够在第一个这样的规则文本区域中键入文本，并在开始键入其他规则时显示另一个空文本字段

目前，我有一个函数，当用指定的名称调用时，它应该生成新的TextAreas（newRulesField函数），还有一个函数处理文本区域内的按键事件

我本质上在寻找的是如何动态修改表单中文本区域的数量

以下是代码，以防有帮助：

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

---

您已经非常接近完成此操作了-只需从HandlerRuleKeyPress函数调用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保留为某个类成员，而不是私有函数成员，这将使在创建后修改数据时更容易访问-像这样的堆栈函数既不美观也不可读。

我发现内部函数是隐藏数据的一种很好的方法，因此它只在需要的地方可用。这可能是因为对于更大的应用程序，您可能需要在其他地方访问该var，但很多时候您不需要。。。这有助于您了解该变量不能在任何其他地方使用。我更喜欢extjs源代码中使用的相同代码样式，我在其注释中将函数标记为private，而不是将函数彼此堆叠在一起。不仅是为了符合标准，还因为我认为它更整洁，更容易阅读。这使得在类的其他几个（公共/私有）函数中重用函数成为可能。但最后我想这只是口味的问题。。。