调用 items.add 方法两次会导致两个项目在卡片上重叠

Question

这是我的添加项目代码：

myapp.cards.vehicleInfo.items.add(
       new Ext.List({ ...})
)

如果在此之后我执行以下操作：

myapp.cards.vehicleInfo.items.add(
        new Ext.Panel(
        {html: 'test' }
        )
    );

带有“测试”的面板出现在我的列表顶部（重叠），而不是垂直位于其下方。我尝试在添加这两个项目之间进行组件布局。

有什么想法吗？如果我只执行上述其中一项，它会按预期工作，但如果我同时执行两项操作，则会导致上述行为。

谢谢

Answer 1

您应该将面板停靠在底部。

myapp.cards.vehicleInfo.dockedItems.add( new Ext.Panel(
    {html: 'test' }
    )
);

更新

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

var store1 = new Ext.data.JsonStore({
    model  : 'Contact',
    data: [
        {firstName: 'Tommy',   lastName: 'Maintz'},
        {firstName: 'Rob',     lastName: 'Dougan'},
        {firstName: 'Ed',      lastName: 'Spencer'},
        {firstName: 'Jamie',   lastName: 'Avins'},
        {firstName: 'Aaron',   lastName: 'Conran'},
        {firstName: 'Dave',    lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay',     lastName: 'Robinson'},
        {firstName: 'Tommy',   lastName: 'Maintz'},
        {firstName: 'Rob',     lastName: 'Dougan'},
        {firstName: 'Ed',      lastName: 'Spencer'},
        {firstName: 'Jamie',   lastName: 'Avins'},
        {firstName: 'Aaron',   lastName: 'Conran'},
        {firstName: 'Dave',    lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay',     lastName: 'Robinson'}
    ]
});

new Ext.Application({
    launch: function() {
       var panel =  new Ext.Panel({
            fullscreen: true,
            id:'thePanel',
            layout: 'vbox',
            style: 'background-color:darkblue',
            scroll:'vertical'
        });
//do this in your dynamically called function
    var list = new Ext.List({
        id :'theList',
        itemTpl : '{firstName} {lastName}',
        store: store1,
        width: '100%',
        scroll:false
    });


var smallPanel = new Ext.Panel({layout: 'auto',width:'100%',height:200,style:'background-color:darkgreen;color:white',html:"Hello I'm the panel"});
    panel.items.add(list);
    panel.items.add(smallPanel);
    panel.doLayout();               
    }
});

Answer 2

您应该检查要添加面板的容器中的布局选项。上周我遇到了同样的问题，并将布局属性设置为布局：{type：'vbox'，align：'stretch'}为我提供了一个很好的一列布局。我不确定这是否是问题所在，但无论如何请尝试一下:)