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

Question

我正在尝试在 sencha touch 中创建一个具有以下设计的页面。

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

---

代码片段

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 将按钮放入这些拖曳子面板中