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,
}