Sencha Touch: vbox внутри проблемы с макетом hbox - PullRequest
Новая
       52

Sencha Touch: vbox внутри проблемы с макетом hbox

3 голосов
/ 08 июня 2011

Я размещаю макет vbox внутри макета hbox.Но vbox не работает должным образом.Вот код:

Код: 

var panel = new Ext.Panel({
    fullscreen : true,
    layout : {
        type : 'hbox',
        align : 'stretch'
    },
    items : [{
        width : 50,
        layout : {
            type : 'vbox',
            align : 'stretch'
        },
        items : [{
            flex : 1,
            html : '1st'
        }, {
            height : 50,
            html : '2nd'
        }]
    }, {
        flex : 1,
        html : 'Large'
    }]
});

Здесь две панели vbox перекрывают друг друга.Если я просто создаю только vbox, он работает отлично.Вот код:

Код: 

var panel = new Ext.Panel({
    fullscreen : true,
    layout : {
        type : 'vbox',
        align : 'stretch'
    },
    items : [{
        flex : 1,
        html : '1st'
    }, {
        height : 50,
        html : '2nd'
    }]
});

Я что-то не так делаю?

РЕДАКТИРОВАТЬ:

Каким-то образом я нахожу, если я поменяюсьэлементы vbox таким образом, тогда он работает: 

...
layout : {
     type : 'vbox',
     align : 'stretch'
},
items : [{
     height : 50,
     html : '2nd'
}, {
     flex : 1,
     html : '1st'
}]
....

Тем не менее, я хочу меньший элемент в нижней части.

1 Ответ

3 голосов
/ 27 июня 2012

В вашем hbox на самом vbox отсутствует конфигурация flex или height ... 

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        width: 50,
        flex:1, // this needs to be flexy as well
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            flex: 1,
            html: '1st'
        }, {
            height: 50,
            html: '2nd'
        }]
    }, {
        flex: 1,
        html: 'Large'
    }]
});
...