Let me explain a few more details.
I've compiled http://docs.oracle.com/javase/6/docs...BagLayout.html using GWT/gwt-exporter to javascript. Swing layout managers such as GridBagLayout need to know preferred size of child items. Preferred size of labels, form fields etc. is simply their natural size, for containers it is calculated recursively by layout algorithm.
For containers, my layout returns following item sizing policy {readsWidth: 0, readsHeight: 0, setsWidth: 1, setsHeight:1}, isItemShrinkWrap returns false. That means, that sizing policy of containers is calculated/calculated.
Here is simple example, where layout calculation succeeds.
Code:
var l1 = {xtype:'label', text:'LLL1', layoutConstraints:{gridx:0, gridy:0}};
var p1 = {id:'p1', title:'P1', layout:'ux.gridbag', layoutConstraints:{gridx:0, gridy:0}, items:[l1]};
var pmain = {id:'main', title: 'Main', layout:'ux.gridbag', items:[p1]};
Ext.create('Ext.Viewport', {id : 'es-mainviewport', layout : 'fit', items:[pmain]});
First p1 calculates layout of it's content, then it adds size of docked items, that invalidates height (because panel header height is unknown), but width is still OK. Layout of pmain then sets width to p1 and the rest of layout is easily finished. Log of layout calculation is at http://pastebin.com/nZvKfQX6 .
If I add one more level of nesting, layout calculation fails.
Code:
var l1 = {xtype:'label', text:'LLL1', layoutConstraints:{gridx:0, gridy:0}};
var p1 = {id:'p1', title:'P1', layout:'ux.gridbag', layoutConstraints:{gridx:0, gridy:0}, items:[l1]};
var p2 = {id:'p2', title:'P2', layout:'ux.gridbag', layoutConstraints:{gridx:0, gridy:0}, items:[p1]};
var pmain = {id:'main', title: 'Main', layout:'ux.gridbag', items:[p2]};
Ext.create('Ext.Viewport', {id : 'es-mainviewport', layout : 'fit', items:[pmain]});
Again p1 calculates layout of it's content, then it adds size of docked items, that invalidates height, but width is still OK. Because preferred size of p1 is unknown, p2 cannot calculate it's preferred size and that causes layout calculation to fail. Log of layout calculation is at http://pastebin.com/Z3CQbLUw.
Can I (or should I) set some attributes to panel header to indicate, that it's height doesn't depend on it's content?
I could solve this problem by separating width and height calculation in gridbag layout. But I would like to avoid doing that, because it shouldn't be necessary. In future, I may need to add another swing layout, in which separation of width and height calculation is not possible (for example http://docs.oracle.com/javase/6/docs...lowLayout.html ) .
I've encountered another problem with form fields. Item sizing policy for fields is {readsWidth: 1, readsHeight: 1, setsWidth: 1, setsHeight:1}, isItemShrinkWrap returns false. Sizing policy of fields is then calculatedFromNatural/calculatedFromNatural.
Code:
var f1 = {id:'f1', xtype:'textfield', layoutConstraints:{gridx:0, gridy:0, pref_size:{width:300}}};
var f2 = {id:'f2', xtype:'combo', layoutConstraints:{gridx:0, gridy:1, pref_size:{width:300}}};
var pmain = {id:'main', title: 'Main', layout:'ux.gridbag', items:[f1, f2]};
Ext.create('Ext.Viewport', {id : 'es-mainviewport', layout : 'fit', items:[pmain]});
Layout calculation succeeds, but log contains messages [W] BAD! f1.width set by f1<textfield> and main<ux.gridbag> . Textfield updates it's width to value set by ux.gridbag layout, but combobox does not. Log of layout calculation is at http://pastebin.com/zEUqN6bt. What's the best way to fix this issue?