Javascript 无法使用sencha在屏幕底部的面板中显示2*2个按钮以及顶部的旋转木马

我正在尝试用SenchaTouch创建一个具有以下设计的页面

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

---

代码片段

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

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

当我检查元素时，它不会显示添加到面板的水平面板1和水平面板2

如果我尝试分别渲染底部窗格，效果会很好。 我尝试了所有可能的方法，但没有找到解决办法

请帮忙

---

谢谢

将窗格添加为带vbox布局的旋转木马项目，将两个窗格添加到带hbox布局的父面板中，并将按钮放入带flex的两个子面板中：1

将窗格添加为带vbox布局的旋转木马项目，将两个窗格添加到带hbox布局的父面板中，并将按钮放入带flex的两个子面板中：1

无法放入在代码段中完成代码。我在代码块周围添加了预标记，并删除了jpg中所有不必要的空白。无法将完整代码放入代码段中。我在代码块周围添加了预标记，并删除了jpg中所有不必要的空白。感谢您的评论。你能详细说明一下吗？我并没有完全明白这一点。你能详细说明一下吗？我没有完全明白