2

我正在尝试在 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。

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

请帮忙。

谢谢

4

1 回答 1

0

使用 vbox 布局将面板添加为轮播项目，并在此父面板中使用 hbox 布局添加两个面板，并将按钮放在这些带有 flex:1 的拖曳子面板中

于 2012-05-16T11:50:40.163 回答