Question

我有一个包含锚点布局的表单，其中包含带有组合框项目的字段集。当我点击一个按钮时，将使用cloneConfig()方法创建一个新的Fieldset，它将被插入到表单的底部。

现在我有两个问题：首先，当我添加一个新的Fieldset时，它将被放置在我的表单工具栏按钮下，同时它应该插在它上面。

其次，如何在两个Feildset之间插入一个新的Fieldset（在pic子tag3中应插入child1和child2之间）。

如何向表单项添加订单？

现在看起来像 enter image description here

这是我的表单代码：

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

Answer 1

要克隆并阻止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，我们可以在任何您喜欢的地方成功添加/插入新组件。更改index方法的insert以满足您的需求。

代码：

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

    }
});

ExtJS4：表单中的克隆字段集

1 个答案: