PDA

View Full Version : Help please with layers



ser
30 Dec 2010, 3:59 AM
I have a form.
Screenshot (http://savepic.org/1052299.png)
Tab1 is hbox, MyContainer2 is auto MyContainer4 hbox ...
I have a problem with MyGrid. It automatically resizes ONLY in width, and how to do that and height?

Condor
30 Dec 2010, 4:11 AM
Configure the hbox layouts both with align:'stretch'.

Don't use layout:'auto'. You could try vbox, anchor or accordion, depending on what you are looking for.

ser
30 Dec 2010, 4:30 AM
auto (http://savepic.org/1069710.png)
vbox (http://savepic.org/1058446.png)

I do not know why it is completely hidden in vbox?

Thanks for stretch - it's work, It is a pity that I had not guessed

Condor
30 Dec 2010, 4:32 AM
The vbox needs to be align:'stretch' too and the items of a vbox need to have a 'height', 'autoHeight:true' or 'flex'.

ser
30 Dec 2010, 6:41 AM
>the items of a vbox need to have a 'height'
if the height is fixed, then when you add a new control in the container I have to change the height, then do not see the point of vbox. But if 'auto' I can easily add new controls and the form will automatically change the height.

Condor
30 Dec 2010, 6:44 AM
No, I said 'height', 'autoHeight:true' or 'flex'.

And if you only have fixed height or autoHeight and no flex items then you can indeed just as well us anchor layout.

ser
30 Dec 2010, 8:18 AM
ok, i get it. Thank you for your patience.

ser
30 Dec 2010, 8:54 AM
By the way, I set to MyContainer3 = vbox and align = stretch and in the editor everything works,
MyContainer3 (http://savepic.org/1092284.png)
but Google Chrome does not work.
Chrome (http://savepic.org/1049276.png)
strange.
Nested containers
MyContainer4 (http://savepic.org/1107647.png)
MyContainer5 (http://savepic.org/1099455.png)
MyContainer6 (http://savepic.org/1082047.png)
and
MyContainer7 (http://savepic.org/1076927.png)

Condor
30 Dec 2010, 8:57 AM
All those screenshots make it hard to see the code. Can you post the resulting JSON config?

ser
30 Dec 2010, 9:21 AM
{
xtype: 'window',
title: 'My Window',
width: 709,
height: 510,
padding: 7,
layout: 'fit',
items: [
{
xtype: 'tabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
title: '????????????? ??????',
frame: true,
layout: 'hbox',
id: 'interimCalculation',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
flex: 1,
layout: 'vbox',
margins: '0 10 0 0',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'editorgrid',
flex: 1,
margins: '0 0 5 0',
columns: [
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
]
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'container',
flex: 1,
layout: 'form',
items: [
{
xtype: 'displayfield',
value: '????? ?? ??????',
hideLabel: true
}
]
},
{
xtype: 'grid',
height: 70,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100
}
]
}
]
}
]
},
{
xtype: 'container',
layout: 'vbox',
boxMinWidth: 100,
width: 200,
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'container',
layout: 'hbox',
autoHeight: true,
layoutConfig: {

},
items: [
{
xtype: 'container',
flex: 1,
layout: 'form',
margins: '0 5 0 0',
items: [
{
xtype: 'displayfield',
value: '',
fieldLabel: '??????????',
anchor: '100%'
},
{
xtype: 'combo',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'priority1'
},
{
xtype: 'combo',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'priority2'
},
{
xtype: 'combo',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'priority3'
},
{
xtype: 'combo',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'priority4'
},
{
xtype: 'button',
text: '????????',
anchor: '100%',
iconCls: 'clear',
id: 'clearButton'
}
]
},
{
xtype: 'container',
flex: 1,
layout: 'form',
items: [
{
xtype: 'displayfield',
value: '',
fieldLabel: '% ?????',
anchor: '100%'
},
{
xtype: 'numberfield',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'percentPoint1'
},
{
xtype: 'numberfield',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'percentPoint1'
},
{
xtype: 'numberfield',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'percentPoint1'
},
{
xtype: 'numberfield',
fieldLabel: 'Label',
anchor: '100%',
hideLabel: true,
id: 'percentPoint1'
},
{
xtype: 'button',
text: '???????????',
anchor: '100%',
iconCls: 'calculate',
id: 'reCalculateButton'
}
]
}
]
},
{
xtype: 'container',
layout: 'form',
labelAlign: 'top',
items: [
{
xtype: 'textfield',
fieldLabel: '???-?? ????????? ? ???',
anchor: '100%',
id: 'quantityContactPerHour'
},
{
xtype: 'checkbox',
boxLabel: '??????? ?? ???-?? ????????? ? ???',
anchor: '100%',
hideLabel: true,
id: 'calculateFromQuantity'
}
]
}
]
}
]
},
{
xtype: 'panel',
title: '???????????? ???????',
id: 'budgeting'
},
{
xtype: 'panel',
title: '???????????',
id: 'finalization'
},
{
xtype: 'panel',
title: '???????? ??????',
id: 'finalBudget'
}
]
}
]
}


I would like to know more, why not frames around the tables? Border checkbox is true.