View Full Version : Layout confusion

20 Jun 2012, 12:55 PM
Hi, I read through the layout doc but it did not give me what I wanted

For example I have panel which is also an hbox,

Ext.create('Ext.panel.Panel', {
items: [{
xtype: 'button'
xtype: 'chart'
layout: { align: 'stretch', type: 'hbox' }


So the problem I have is that now the chart stretches to the full size which I want, but the button also stretches. I want to have it specific to the component. I want to disable it for the button. Any idea on how to do this?

20 Jun 2012, 1:00 PM

20 Jun 2012, 2:51 PM
Where do you want the button? You can create a tbar for the panel

Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
height: 200,
renderTo: Ext.getBody(),
layout: { type: 'hbox' },
tbar: [{
text: 'button'
items: [{
xtype: 'panel', // charge goes here
title: 'my chart',
flex: 1



20 Jun 2012, 7:31 PM
I just put a single button there for an example. I dont want to use a tbar, any other solutions?

20 Jun 2012, 8:12 PM
If you place a container (set width) where you have your button (original screen) and then place a button in int, it will display as required. You will of course have the space below the button and the chart to the right.

If this is not what you are referring to please provide a mock screen of what you want.