CODE SNIPPET

Question

我正在使用EXTJS xtype: container来创建一行，当我想在商店中插入一行时，行会被添加到现有行的顶部而不是底部，有没有办法添加新创建的行到底部？

以下是代码：

somefunc: function (token, filter, op) {
    var filter = Ext.create({
        xtype: 'container',
        height: 30,
        cls: 'purge-filter-item',
        layout: {
            type: 'hbox',
            align: 'middle'
        },
        items: [
            this.typeCombo = new Ext.form.ComboBox({
                emptyText: $L('Select a filter...'),
                store: this.menuStore = new Ext.data.ArrayStore({
                    fields: ['key', 'title'],
                    data: this.getFilterValues()
                })
            })
        ]
    });
    this.insert(0, filter);

    this.doLayout();
    return filter;
}

知道为什么会发生这种情况以及如何解决这个问题？

Answer 1

知道为什么会发生这种情况以及如何解决这个问题？

因为您使用的是insert()方法而不是此方法，所以您可以使用add()方法默认添加最后一个索引。

在这个 FIDDLE 中，我使用add()方法创建了一个演示来添加新组件。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {

            title: 'Add new row',

            renderTo: Ext.getBody(),

            tbar: [{
                text: 'Add new',
                handler: function (btn) {
                    var panel = btn.up('panel');
                    panel.add({
                        xtype: 'container',
                        height: 30,
                        cls: 'purge-filter-item',
                        layout: {
                            type: 'hbox',
                            align: 'middle'
                        },
                        items: [{
                            xtype: 'textfield',
                            emptyText:'enter value here',
                            fieldLabel:'this is field '+( panel.items.items.length+1)
                        }]
                    });
                }
            }]

        })
    }
});

EXTJS将行添加到.insert（）上容器的顶部

1 个答案:

CODE SNIPPET