0

当初、このパネルにはaccordionレイアウトがありました。次に示されている両方の子パネル。しかし、vboxに変更するとすぐに、2番目のパネルが表示されます。しかし、中には木がありません！

画像をご覧ください。

ここに画像の説明を入力してください

関連コード

OurApp.online_tree_store = Ext.create('Ext.data.TreeStore', {
    root : {
        expanded : true,
        children : []
    }
});
OurApp.online_tree = Ext.create('Ext.tree.Panel', {
    store : OurApp.online_tree_store,
    title : 'Online',
    region: 'north',
    useArrows : true,
    rootVisible : false,
    listeners : {
        itemdblclick : contactitemdblclick
    }
});

/// Note: Offline tree is exactly the same as online tree.

Ext.create('Ext.panel.Panel', {
    closable : false,
    width : 300,
    maxWidth : 400,
    itemId : 'viewport-contacts',
    constrain : true,
    layout : 'accordion', // <--- layout changed to vbox or border
    region : 'west',
    hidden : true,
    border : true,
    defaults : {
        height : '50%', // <--- used for vbox
    },
    tbar : [{
        xtype : 'button',
        text : 'Sign out',
        iconCls : 'icon-disconnect',
        handler : function() {
        }
    }],
    items : [OurApp.online_tree, OurApp.offline_tree],
});
4

1 に答える 1

2

高さ：「50％」はフレックス：1である必要があります。

また、alignを指定することもできます：'stretch'

Ext.require('*');

Ext.onReady(function() {

    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: document.body,
        width: 400,
        height: 400,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            title: 'P1',
            flex: 1
        }, {
            title: 'P2',
            flex: 1
        }]
    });

});
于 2012-10-28T04:22:06.830 に答える