ExtJS4:在表单中克隆 Fieldset
ExtJS4: clone Fieldset in a form
我有一个带有锚点布局的表单,其中包含一个带有组合框项目的字段集。当我单击按钮时,将使用 cloneConfig()
方法创建一个新的字段集,并将其插入到表单底部。
现在我有两个问题:
首先,当我添加一个新的 Fieldset 时,它将被放置在我的表单工具栏按钮下方,而它应该被插入到按钮上方。
其次,如何在两个Feildsets之间插入一个新的Fieldset(在图片中child tag3应该插入child1和child2之间)。
如何向我的表单项添加订单?
现在看起来像这样
这是我的表单代码:
Ext.define('APP.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'tform',
requires: ['Ext.form.FieldSet', 'Ext.form.field.Text', 'Ext.toolbar.Toolbar'],
layout: {
type: 'anchor'
},
bodyPadding: 10,
store: 'Tag',
border: false,
autoScroll: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'fieldset',
hidden: false,
padding: 10,
fieldDefaults: {
anchor: '100%'
},
title: 'Definition Type Entry',
items: [{
xtype: 'textfield',
name: 'tagName',
},
{
xtype: 'textareafield',
height: 40,
name: 'description',
}, {
xtype: 'combobox',
name: 'basetype',
}, {
xtype: 'combobox',
name: 'dt',
}, {
xtype: 'numberfield',
}, {
xtype: 'button',
iconCls: 'addnew',
itemId: 'addChildBtn',
disabled: false,
}]
}, {
xtype:'container',
region:'south',
items:[
{
xtype: 'toolbar',
ui: 'footer',
layout: {
pack: 'end',
type: 'hbox'
},
items: [{
xtype: 'button',
iconCls: 'delete',
itemId: 'deleteBtn',
disabled: true,
text: 'Delete',
tooltip: 'delete the selected definition type'
}, {
xtype: 'button',
iconCls: 'save',
itemId: 'saveBtn',
text: 'Save'
}]}]},]});
me.callParent(arguments);
}
});
要克隆并防止 insert
方法不认为它已经是表单中的一个组件,您需要每次都给它一个唯一的 itemId。否则 insert
方法 move
元素而不是添加它:这是负责的 ExtJS 源代码的片段
insert : function(index, comp) {
var compIdx;
if (comp && comp.isComponent) {
compIdx = this.items.indexOf(comp);
if (compIdx !== -1) {
return this.move(compIdx, index);
}
}
return this.add(index, comp);
}
因此,通过确保我们增加 itemId
,我们能够成功地 add/insert 新组件,无论您喜欢什么。更改 insert
方法的 index
以满足您的需要。
代码:
Ext.application({
name: 'Fiddle',
launch: function() {
myForm = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
layout: 'auto',
bodyPadding: 5,
items: [{
xtype: 'fieldset',
itemId: 's1',
hidden: false,
padding: 10,
fieldDefaults: {
anchor: '100%'
},
title: 'Entry',
items: [{
xtype: 'textfield',
name: 'tagName',
fieldLabel: 'Name'
}, , {
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function() {
// Count the fieldsets
countedFieldsets = Ext.ComponentQuery.query('fieldset').length;
// Clone field set
var newFieldset = Ext.ComponentQuery.query('fieldset')[0].cloneConfig({
itemId: 's' + (countedFieldsets + 1),
title: "Entry " + countedFieldsets,
});
myForm.insert(countedFieldsets, newFieldset);
}
}]
}, ],
dockedItems: [{
xtype: 'toolbar',
ui: 'footer',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [{
xtype: 'button',
itemId: 'saveBtn',
text: 'Save'
}]
}],
renderTo: Ext.getBody()
});
}
});
演示:https://fiddle.sencha.com/#fiddle/gb1
至于工具栏和在任意位置插入,您可以将工具栏指定为 dockedItem
(如上所述)并赋予其适当的属性。或者你总是可以 insert
在工具栏之前(或在任何其他任意索引位置)例如在此演示中:https://fiddle.sencha.com/#fiddle/gb2
演示代码:
Ext.application({
name: 'Fiddle',
launch: function() {
myForm = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
layout: 'auto',
bodyPadding: 5,
items: [{
xtype: 'fieldset',
itemId: 's1',
hidden: false,
padding: 10,
fieldDefaults: {
anchor: '100%'
},
title: 'Entry',
items: [{
xtype: 'textfield',
name: 'tagName',
fieldLabel: 'Name'
}, , {
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function() {
// Count the fieldsets
countedFieldsets = Ext.ComponentQuery.query('fieldset').length;
// Clone field set
var newFieldset = Ext.ComponentQuery.query('fieldset')[0].cloneConfig({
itemId: 's' + (countedFieldsets + 1),
title: "Entry " + countedFieldsets,
});
// here we will count the items of the form
var formItemsCount = myForm.items.length;
// now insert it at the total lenght -1
myForm.insert(formItemsCount - 1, newFieldset);
}
}]
}, {
xtype: 'toolbar',
ui: 'footer',
layout: {
pack: 'end',
type: 'hbox'
},
items: [{
xtype: 'button',
itemId: 'saveBtn',
text: 'Save'
}]
}],
renderTo: Ext.getBody()
});
}
});
我有一个带有锚点布局的表单,其中包含一个带有组合框项目的字段集。当我单击按钮时,将使用 cloneConfig()
方法创建一个新的字段集,并将其插入到表单底部。
现在我有两个问题: 首先,当我添加一个新的 Fieldset 时,它将被放置在我的表单工具栏按钮下方,而它应该被插入到按钮上方。
其次,如何在两个Feildsets之间插入一个新的Fieldset(在图片中child tag3应该插入child1和child2之间)。
如何向我的表单项添加订单?
现在看起来像这样
这是我的表单代码:
Ext.define('APP.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'tform',
requires: ['Ext.form.FieldSet', 'Ext.form.field.Text', 'Ext.toolbar.Toolbar'],
layout: {
type: 'anchor'
},
bodyPadding: 10,
store: 'Tag',
border: false,
autoScroll: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'fieldset',
hidden: false,
padding: 10,
fieldDefaults: {
anchor: '100%'
},
title: 'Definition Type Entry',
items: [{
xtype: 'textfield',
name: 'tagName',
},
{
xtype: 'textareafield',
height: 40,
name: 'description',
}, {
xtype: 'combobox',
name: 'basetype',
}, {
xtype: 'combobox',
name: 'dt',
}, {
xtype: 'numberfield',
}, {
xtype: 'button',
iconCls: 'addnew',
itemId: 'addChildBtn',
disabled: false,
}]
}, {
xtype:'container',
region:'south',
items:[
{
xtype: 'toolbar',
ui: 'footer',
layout: {
pack: 'end',
type: 'hbox'
},
items: [{
xtype: 'button',
iconCls: 'delete',
itemId: 'deleteBtn',
disabled: true,
text: 'Delete',
tooltip: 'delete the selected definition type'
}, {
xtype: 'button',
iconCls: 'save',
itemId: 'saveBtn',
text: 'Save'
}]}]},]});
me.callParent(arguments);
}
});
要克隆并防止 insert
方法不认为它已经是表单中的一个组件,您需要每次都给它一个唯一的 itemId。否则 insert
方法 move
元素而不是添加它:这是负责的 ExtJS 源代码的片段
insert : function(index, comp) {
var compIdx;
if (comp && comp.isComponent) {
compIdx = this.items.indexOf(comp);
if (compIdx !== -1) {
return this.move(compIdx, index);
}
}
return this.add(index, comp);
}
因此,通过确保我们增加 itemId
,我们能够成功地 add/insert 新组件,无论您喜欢什么。更改 insert
方法的 index
以满足您的需要。
代码:
Ext.application({
name: 'Fiddle',
launch: function() {
myForm = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
layout: 'auto',
bodyPadding: 5,
items: [{
xtype: 'fieldset',
itemId: 's1',
hidden: false,
padding: 10,
fieldDefaults: {
anchor: '100%'
},
title: 'Entry',
items: [{
xtype: 'textfield',
name: 'tagName',
fieldLabel: 'Name'
}, , {
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function() {
// Count the fieldsets
countedFieldsets = Ext.ComponentQuery.query('fieldset').length;
// Clone field set
var newFieldset = Ext.ComponentQuery.query('fieldset')[0].cloneConfig({
itemId: 's' + (countedFieldsets + 1),
title: "Entry " + countedFieldsets,
});
myForm.insert(countedFieldsets, newFieldset);
}
}]
}, ],
dockedItems: [{
xtype: 'toolbar',
ui: 'footer',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [{
xtype: 'button',
itemId: 'saveBtn',
text: 'Save'
}]
}],
renderTo: Ext.getBody()
});
}
});
演示:https://fiddle.sencha.com/#fiddle/gb1
至于工具栏和在任意位置插入,您可以将工具栏指定为 dockedItem
(如上所述)并赋予其适当的属性。或者你总是可以 insert
在工具栏之前(或在任何其他任意索引位置)例如在此演示中:https://fiddle.sencha.com/#fiddle/gb2
演示代码:
Ext.application({
name: 'Fiddle',
launch: function() {
myForm = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
layout: 'auto',
bodyPadding: 5,
items: [{
xtype: 'fieldset',
itemId: 's1',
hidden: false,
padding: 10,
fieldDefaults: {
anchor: '100%'
},
title: 'Entry',
items: [{
xtype: 'textfield',
name: 'tagName',
fieldLabel: 'Name'
}, , {
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function() {
// Count the fieldsets
countedFieldsets = Ext.ComponentQuery.query('fieldset').length;
// Clone field set
var newFieldset = Ext.ComponentQuery.query('fieldset')[0].cloneConfig({
itemId: 's' + (countedFieldsets + 1),
title: "Entry " + countedFieldsets,
});
// here we will count the items of the form
var formItemsCount = myForm.items.length;
// now insert it at the total lenght -1
myForm.insert(formItemsCount - 1, newFieldset);
}
}]
}, {
xtype: 'toolbar',
ui: 'footer',
layout: {
pack: 'end',
type: 'hbox'
},
items: [{
xtype: 'button',
itemId: 'saveBtn',
text: 'Save'
}]
}],
renderTo: Ext.getBody()
});
}
});