The filefield
xtype has property to hide textfield and show only button with config: buttonOnly: true
.
However, although the textfield is not shown, it occupies space, and the width of that component is not the same as width of the button. So, when more buttons should be aligned in hbox
layout, they are not stretched properly (Panel1
).
Is it possible to somehow show only the button of filefield
so that it appears as if it was a 'normal' button (Panel2
)?
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel1',
items: [{
xtype: 'container',
padding: '10px 0 20px 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
defaults: {
margin: '0 5 0 0',
width: 150
},
items: [{
xtype: 'filefield',
name: 'upload',
buttonOnly: true,
buttonText: 'Upload photo',
flex: 1,
}, {
xtype: 'button',
name: 'savephoto',
text: 'Save photo',
flex: 1,
}, {
xtype: 'button',
name: 'remove',
text: 'Remove photo',
flex: 1,
}]
}, ]
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel2',
items: [{
xtype: 'container',
padding: '10px 0 20px 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
defaults: {
margin: '0 5 0 0',
width: 150
},
items: [{
xtype: 'button',
name: 'upload',
text: 'Upload photo',
flex: 1,
}, {
xtype: 'button',
name: 'savephoto',
text: 'Save photo',
flex: 1,
}, {
xtype: 'button',
name: 'remove',
text: 'Remove photo',
flex: 1,
}]
}, ]
});
}
});
You can use the 'buttonConfig' property:
{
xtype: 'filefield',
name: 'upload',
buttonOnly: true,
buttonText: 'Upload photo',
buttonConfig: {
width: '100%'
},
flex: 1,
}