无法使用sencha在屏幕顶部的面板中显示2 * 2按钮以及屏幕顶部的轮播

Question

我正在尝试使用以下设计在sencha touch中创建一个页面。

我使用下面的代码使其看起来像

---

CODE SNIPPET

entwoven.views.vehicleSelectionToolBar = new Ext.Toolbar({
    //Code for toolbar
});

//  **Carousel Started
// ** first carPanel1 - Added 2 pics to view in the visible area

entwoven.views.carPanel1 = new Ext.Panel({
    id: 'carPanel1',
    layout: 'hbox',
    items: [{
        xtype: 'button',
        id: 'beetelbtnId',
        cls: 'beetelbtn',

    }, {
        xtype: 'button',
        id: 'emobbtnId',
        cls: 'emobbtn',
        handler: function() {
            entwoven.views.viewport.setActiveItem('modusaPanel', {
                type: 'slide',
                direction: 'left'
            });
        }

    }]
});

entwoven.views.carPanel2 = new Ext.Panel({
    id: 'carPanel2',
    layout: 'hbox',
    items: [{
        // Same Code as above
    }]

});

entwoven.views.carCarousel = new Ext.Carousel({
    id: 'carCarousel',
    cls: 'carCarousel',

    defaults: {
        cls: 'card'
    },
    items: [entwoven.views.carPanel1, entwoven.views.carPanel2]
});


// Carousel ended//

// Bottom part 2 * 2 buttons started // 
entwoven.views.carhomePanel1 = new Ext.Panel({
    id: 'carhomePanel1',
    layout: 'hbox',
    items: [{
        xtype: 'button',
        id: 'vehiclebtn',

    }]
});

entwoven.views.carhomePanel2 = new Ext.Panel({
    // Same code as above panel with different id and cls
});


entwoven.views.carhomePanel3 = new Ext.Panel({
    // Same code as above panel with different id and cls
});

entwoven.views.carhomePanel4 = new Ext.Panel({
    // Same code as above panel with different id and cls
});

entwoven.views.horizontalPanel1 = new Ext.Panel({
    id: 'horizontalPanel1',
    layout: 'hbox',
    items: [entwoven.views.carhomePanel1, entwoven.views.carhomePanel2]

});

entwoven.views.horizontalPanel2 = new Ext.Panel({
    id: 'horizontalPanel2',
    layout: 'hbox',
    items: [entwoven.views.carhomePanel3, entwoven.views.carhomePanel4]

});

entwoven.views.staticPanel = new Ext.Panel({
    id: 'staticPanel',
    //fullscreen:true,
    layout: 'vbox',
    cls: 'panelBackground',
    items: [entwoven.views.horizontalPanel1, entwoven.views.horizontalPanel2]
});

//  Bottom part 2 * 2 buttons started // 


entwoven.views.vehicleSelectionPanel = new Ext.Panel({
    id: 'vehicleSelectionPanel',
    fullscreen: true,
    cls: 'panelBackground',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        flex: 2
    },
    dockedItems: entwoven.views.vehicleSelectionToolBar,
    items: [entwoven.views.carCarousel, entwoven.views.staticPanel]
});

当我尝试在谷歌浏览器上运行它时，我无法在可见区域看到底部。

当我检查元素时，它不会显示添加到面板的horizo​​ntalPanel1和horizo​​ntalPanel2。

如果我尝试单独渲染底部面板，那就很好了。 我尝试了所有可能的方法，但无法找到解决方案。

请帮忙。

由于

Answer 1

使用vbox布局将面板添加为轮播项目，使用hbox布局将此面板中的两个面板添加到这些拖动子面板中并使用flex：1