我有一个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保持为某个类的成员而不是私有函数成员,这将使得在创建后修改它时更容易访问 – 这样的堆栈函数不是很漂亮也不可读.
原文地址:https://codeday.me/bug/20190627/1301904.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。