Odd 'overlapping' behavior with vboxlayout and hboxlayour combined with xtypes

[termy21]

I have a requirement that I make a sencha touch form (iPad) appear exactly as a paper form, which will require a number of vbox's and hbox's nested inside one another.

I am also using fieldsets, but I also seem to get this problem with xtypes without a fieldset.

My problem:
With the following code, if remove the flex numbers (where the comments are), you will see the two panels overlapping and the text overtype. If you play with the flex numbers, you can get the panels almost to line up on top of each other without a large gap (which is the desired behavior). However, my iPad does not render the same as Safari or Chrome when I do this.

Am I missing something here? Should I not be able to have mutliple panels in an hboxlayout layout panel, and then take a few hboxlayout panels and put them in a vboxlayout panel?

Any help would be appreciated. Thanks.





Ext.setup({


onReady: function () {


var ab = new Ext.Panel({


flex: 1,


items: [{xtype: 'fieldset', title: 'Heading 1', items: [


{ name: 'A', label: 'A', xtype: 'textfield' },


{ name: 'B', label: 'B', xtype: 'textfield'}]}]


});


var cd = new Ext.Panel({


flex: 1,


items: [{xtype: 'fieldset', title: 'Heading 2', items: [


{ name: 'C', label: 'C', xtype: 'textfield' },


{ name: 'D', label: 'D', xtype: 'textfield'}]}]


});


var row1 = new Ext.Panel({


layout: 'hbox',


flex: 1000, //Remove this line


items: [ab, cd]


});





var ef = new Ext.Panel({


flex: 1,


items: [{xtype: 'fieldset', title: 'Heading 3', items: [


{ name: 'E', label: 'E', xtype: 'textfield' },


{ name: 'F', label: 'F', xtype: 'textfield'}]}]


});


var gh = new Ext.Panel({


flex: 1,


items: [{xtype: 'fieldset', title: 'Heading 4', items: [


{ name: 'G', label: 'G', xtype: 'textfield' },


{ name: 'H', label: 'H', xtype: 'textfield'}]}]


});


var row2 = new Ext.Panel({


layout: 'hbox',


flex: 1000, //Remove this line


items: [ef, gh]


});





var ij = new Ext.Panel({


flex: 1,


items: [{xtype: 'fieldset', title: 'Heading 5', items: [


{ name: 'I', label: 'I', xtype: 'textfield' },


{ name: 'J', label: 'J', xtype: 'textfield'}]}]


});


var kl = new Ext.Panel({


flex: 1,


items: [{xtype: 'fieldset', title: 'Heading 6', items: [


{ name: 'K', label: 'K', xtype: 'textfield' },


{ name: 'L', label: 'L', xtype: 'textfield'}]}]


});


var row3 = new Ext.Panel({


layout: 'hbox',


flex: 1000, //Remove this line


items: [ij, kl]


});


new Ext.Panel({


fullscreen: true,


layout: 'vbox',


items: [row1, row2, row3]


});


}


});

[evant]

Flex is just a ratio. What are you trying to do exactly?

[termy21]

Thanks for the quick response.
I would like the two hboxlayout panels to be on top of each other vertically, with no large gap or overlap between them.

With my sample code I've acheived either a very large gap or total overlap of the panels.

Thanks.

[evant]

Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
style: 'border: 1px solid red'
},
items: [{
html: '1A',
flex: 2
},{
html: '1B',
flex: 1
},{
html: '1C',
flex: 1
}]
},{
defaults: {
style: 'border: 1px solid green'
},
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
html: '2A',
flex: 1
},{
html: '2B',
flex: 1
},{
html: '2C',
flex: 2
}]
}]
});
}
});

[termy21]

Thanks Evan. The colouring of the borders really helped.