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

你需要额外的逻辑来检查你是否已经添加了新的文本区域（或者每次按键都会得到一个新文本区域），如果稍后清空了最新的规则，可能会删除其他文本区域，并修复textarea id有点漂亮（这一切都是你的 handleRuleKeypress func）。

我对你的应用程序设计的一般想法是将FormPanel保持为某个类的成员而不是私有函数成员，这将使得在创建后修改它时更容易访问 - 像这样的堆叠函数不是很非常不可读。

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

1 个答案: