ExtJS: How to set dockedItems alignTarget - forms

Question

I added dockedItems to my form.Panel, it aligns to the form, but I want the dockedItems align to the table inside the form, how should I do.
Here is the demo: https://fiddle.sencha.com/#view/editor&fiddle/3kso
Thanks!

Answer 1

Since you set the viewport's layout to fit, and you also specify a fixed width for the table (300 px), the form is ordered to occupy the remaining area, and that's why the toolbar is at the left edge.
Although you could try to make the toolbar floating and align it the the table, I think it is easier to let the form take only the space it needs, and therefore the toolbar will we aligned to the form.
To do so, at the end of your fiddle, try this code to change the viewport's layout:
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
});
If you need the fit layout for some other reasons, you can keep the fit layout, and add the form within a container:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
Or if you need a panel that occupies all place, and you want a panel inside this with aligned toolbar, you can use and outside and an inside panel also (check the grey background to see the outside panel):
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
The important thing is that by using vbox and middle in the layout the form will only occupy the place it needs.
EDIT 1:
To address the issues in the comments, here is a complete example that can be run as fiddle:
const form = Ext.create('Ext.form.Panel', {
autoScroll: true,
bodyStyle: {
background: '#abd1ca'
},
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '300px',
'background': '#e3f2fd',
'border-collapse': 'collapse',
}
},
tdAttrs: {
style: {
border: '1px solid #ccc',
padding: '6px',
}
}
},
fieldDefaults: {
labelWidth: 40,
width: '100%',
},
items: new Array(100).fill({
fieldLabel: 'sample',
xtype: 'textfield'
}),
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [{
iconCls: null,
glyph: 61,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 88,
xtype: 'button'
}, {
iconCls: null,
glyph: 70,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 47,
xtype: 'button'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'hbox',
align: 'stretch',
pack: 'middle'
},
items: [form],
buttonAlign: 'center',
buttons: [{
text: 'Save',
handler: 'save',
}, ],
}]
});