javascript – 使用ExtJS动态地将TextAreas添加到用户输入的FormPanel上

我有一个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();
}

解决方法:

你已经非常接近这样做 – 只需从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();
    }

你需要额外的逻辑来检查你是否已经添加了新的文本区域(或者每次按键都会得到一个新的文本区域),如果以后清空了最新的规则,可能会删除附加的文本区域,并修复textarea id的有点漂亮(这一切都是你的handleRuleKeypress功能).

我对你的应用程序设计的一般想法是将FormPanel保持为某个类的成员而不是私有函数成员,这将使得在创建后修改它时更容易访问 – 这样的堆栈函数不是很漂亮也不可读.