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

Google Chrome で実行しようとすると、表示領域の下部が表示されません。

要素を調べていると、パネルに追加された horizo​​ntalPanel1 と horizo​​ntalPanel2 が表示されません。

下のパネルを別々にレンダリングしようとすると、うまくいきます。考えられるすべての方法を試しましたが、解決策を見つけることができませんでした。

助けてください。

ありがとう

4

1 に答える 1

0

vbox レイアウトでカルーセルの項目としてパネルを追加し、hbox レイアウトでこの親パネルに 2 つのパネルを追加し、flex:1 でこれらのトウ サブパネルにボタンを配置します。

于 2012-05-16T11:50:40.163 に答える